2

我有一个从数据库中填充的 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 不是很熟悉。我试图访问传递给我的 PHP 脚本中的 getData 函数的“str”变量，"$string = $_GET['q']"但仍然没有用。在此先感谢您的帮助。

更新：我能够找出问题的根源：我有两个函数可以从数据库中填充选择列表。当用户从第一个下拉列表中选择一个选项（id="categoriesSelect"）时，第二个下拉列表（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()。

4

2 回答 2

2

看来您的代码正在检索选择的值。但它在你的功能上失败了。

我尝试使用该打开功能Here。但是，在我这边，它不能使用斜杠（/）。所以，尝试删除它并尝试它。

...

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

...

编辑：完整的工作代码...

<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'];

试试这个问题的编辑部分。

和这个其他的让它一起工作。

希望这可以帮助。

于 2013-05-02T21:24:50.367 回答
1

您可以将这种可能的解决方案与 JQuery 一起使用：

  1. 在 php 代码中的 option 标签中添加属性“id”并删除 onChange 函数：

    echo "<select id='mySelect' title='Select one' name='selectcat'>";

  2. 添加 Jquery File JQuery 1.9.1并添加 javascript HTML 标签

  3. 放在关闭标签正文之前：

    $(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;
});

    });

  4. 读入 php：

    回声 $_POST['selectedValue'];

    或者

    回声 $_POST['selectedLabel'];

于 2013-05-02T21:26:00.943 回答