使用 AJAX/PHP/SQL 更新选择/选项元素值答案

【问题标题】：Updating select/option elements value using AJAX/PHP/SQL使用 AJAX/PHP/SQL 更新选择/选项元素值
【发布时间】：2017-10-19 09:57:36
【问题描述】：

小背景，

我有一个使用 sql 查询从 PHP 中回显的两个动态选择/选项下拉列表。

如果选择第一个下拉框，则第二个下拉框将包含与第一个下拉框相关的信息，例如第一个下拉框（控制台）第二个下拉框（ps4/xbox one）等。所有这些信息都存储到数据库中.

如果用户选择第一个下拉框 javascript/AJAX 将该信息发送到 PHP/服务器，然后在 PHP 中创建一个 sql 查询并回显第二个下拉框的所有可用选择/选项。

但是我有点卡住了，因为我不确定这是否是实现标签的正确方法。

选项字段上没有显示任何内容。

更新，

第一个 Drop box 工作正常，问题出在第二个，id 为 sub_cat。

Javascript AJAX：

 function subCatActivation(i) {
      var selectedBox = document.getElementById("Cat" + i);
      var val = selectedBox.options[selectedBox.selectedIndex].value;
      var hr = new XMLHttpRequest();
      var url = "parse_receive_select.php";
      hr.open("POST", url, true);

      hr.setRequestHeader("Content-type", "application/x-www-form-urlendcoded");

      hr.onreadystatechange = function () {
          if (hr.readyState == 4 && hr.status == 200) {
                var return_data = hr.responseText;
                document.getElementById("opt").innerHTML = return_data;
          }
      }
      hr.send(val);
 }

HTML

<select name="Cat" id="Cat" onchange="subCatActivation('')" onclick="realTimeChange(this.id)">
    <option value="title">Main Category</op
    <?php echo $option?>
</select>
<select name="sub_cat" id="sub_cat">
    <option value="Non-Use">Sub-Category</option>
    <div id="opt"></div>
</select>

PHP

    if(isset($_POST['val'])){
        $mainCat = $_POST['val'];
        $subOption = '';
        $subName = [];
        include"../storeSQL/sql_Connection.php";
        $sql = "SELECT SUB_CAT FROM CATEGORIES WHERE CAT = '$mainCat' GROUP BY SUB_CAT";
        $getQuery = $connection->query($sql);
        $i = 0;
        while($row = $getQuery->fetch_array()){
        $subName[$i] = $row['SUB_CAT'];
        $subOption .= "<option value='$subName[$i]'>$subName[$i]</option>";
        $i++;
    }
    echo $subOption;
}

【问题讨论】：

您有未完成的 HTML 标记。另外，为什么你的<select> 中有<div>？那应该只包含<option> 标签（或其组，但不在<div> 中）。在浏览器中调试时，服务器返回什么？
@David，我使用了 alert(val) 和它的空白。也许sql查询是错误的，我会看看。我添加div的原因是因为我不知道如何从php实现回显的
@David 我尝试从 php 回显纯文本以查看是否有任何返回，但它仍然失败，所以我认为它与 sql 查询没有任何关系
由于您没有在此处发送任何密钥，因此此 php 代码将始终失败并且不会转到 if 块

标签： javascript php html ajax

【解决方案1】：

在send函数中使用键值对

 hr.send("val="+val);

现在使用sub_cat 附加option 标签

  document.getElementById("sub_cat").innerHTML = return_data;

然后在 return_data 之前添加第一个选项

由于您没有在此处发送任何密钥，因此下面的代码将始终失败并且不会转到 if 块

 if(isset($_POST['val'])){

【讨论】：

好的会试试，为什么我需要"val="+val？ val 不应该正常工作吗？您也可以更详细地了解“然后在 return_data 之前添加第一个选项”的含义
它没有用，但我理解你对 hr.send("val="+val) 的意思，因为我没有解析到 $_POST 的密钥。然而它仍然没有工作。什么都没有忽略，我尝试在 if(isset) 之外回显一个测试，它确实有效。所以传递'val'有问题:(
在 php 端试试 echo "test";exit; ？
也可以试试hr.send("val=test");
hmm if 里面不行，if 外面可以。