使用AJAX检索HTML下拉列表值 - Retrieve HTML drop down list value with AJAX

我有一个HTML下拉列表，我从数据库填充。我的问题是如何使用AJAX从这个下拉列表中检索选定项的值?我的javascript:

<script type = "text/javascript">
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } 
    else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("div1").innerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "/display-product.php?q="+str, true);
        xhr.send(null);
    }
}
</script>

display-product.php中的下拉列表:

<div>
      <?php
       echo '<select title="Select one" name="selectcat" onChange="getData(this.options[this.selectedIndex].value)">';
       while($row1 = $result->fetch_assoc()){            
       echo '<option value="' . $row1['id'] . '">' . $row1['category'] . '</option>';
        }
       echo '</select>';
        ?>
        </div>

显示所选项目的div:

<div class="product_directory" id="div1"></div>

我不太熟悉AJAX。我试图访问"str"变量传递给getData函数在我的PHP脚本使用"$string = $_GET['q']"，但仍然没有工作。提前感谢您的帮助。

UPDATE:我能够找出问题的根源:我有两个函数从数据库中填充选择列表。当用户从第一个下拉列表(id =" categoresselect ")中选择一个选项时，第二个下拉列表(id =" subcatsSelect")将自动填充。下面是两个函数的代码:

<script type="text/javascript">
<?php
echo "var categories = $jsonCats; 'n";
echo "var subcats = $jsonSubCats; 'n";
?>
function loadCategories(){
    var select = document.getElementById("categoriesSelect");
    select.onchange = updateSubCats;
    for(var i = 0; i < categories.length; i++){
      select.options[i] = new Option(categories[i].val,categories[i].id);          
    }
}
function updateSubCats(){
    var catSelect = this;
    var catid = this.value;
    var subcatSelect = document.getElementById("subcatsSelect");
    subcatSelect.options.length = 0; //delete all options if any present
    for(var i = 0; i < subcats[catid].length; i++){
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
    }
  }
</script>

如果我手动放入选择列表，代码可以正常工作。但是使用这两个函数从数据库中提取数据时，没有显示任何内容。我像这样调用loadCategories()函数
<body onload = "loadCategories()">。另一个选择框与这个非常相似。我不知道具体的问题，但我知道它要么来自loadCategories()或updateSubCats()。

似乎您的代码正在检索选择上的值。但是你的功能失效了。

我试过使用这个打开函数。但是，在我这边，使用斜杠(/)不起作用。所以，试着删除它，并尝试它。

…

 xhr.open("GET", "display-product.php?q="+str, true);

…

EDIT:完整工作代码…

<script type = "text/javascript">
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } 
    else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("div1").innerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "display-product.php?q="+str, true);
        xhr.send(null);
    }
}
</script>
<select title="Select one" name="selectcat" onChange="getData(this.options[this.selectedIndex].value)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="div1"></div>

…在display-product.php

echo $_GET['q'];

对于你的问题的编辑部分，试试这个。

和这个另一个使它一起工作。

您可以使用JQuery的这个可能的解决方案:

在php代码的选项标签中添加属性"id"，并删除onChange函数:

echo "<select id='mySelect' title='Select one' name='selectcat'>";
添加Jquery文件Jquery 1.9.1并添加javascript HTML标签

将结束标签置于body前:

$(document).ready( function() { $('#mySelect').change(function(){

  var $selectedOption = $(this).find('option:selected');
  var selectedLabel = $selectedOption.text();
  var selectedValue = $selectedOption.val();
  alert(selectedValue + ' - ' + selectedLabel);
  $('.product_directory').html(selectedValue + ' - ' + selectedLabel);
   $.ajax({
    type:"POST",
    url:"display-product.php",
    data:selectedValue OR selectedLabel,
    success:function(response){
        alert('Succes send');
    }
  })
  return false;
});

});

在php中读取:

echo $ _POST [' selectedValue '],

或

echo $ _POST [' selectedLabel '],