使用AJAX / PHP / SQL更新select / option元素值

时间:2017-10-19 09:57:37

标签: javascript php html ajax

小背景,

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

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

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

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

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

更新

第一个Drop框工作正常,问题是第二个,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;
}

1 个答案:

答案 0 :(得分:0)

send函数

中使用键值对
 hr.send("val="+val);

现在使用sub_cat附加option代码

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

然后在return_data

之前添加第一个选项

由于您未在此处发送任何密钥,因此以下代码将始终失败,并且不会转到阻止

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