使用AJAX / PHP / SQL更新选择/选项元素值 [英] Updating select/option elements value using AJAX/PHP/SQL

问题描述

小背景，

我有两个动态选择/选项下拉菜单，它使用sql查询从PHP中回显。

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

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

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

没有显示在选项字段中。

已更新，

第一个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 =Catid =Catonchange =subCatActivation（''）onclick =realTimeChange（this.id）> 
< option value =title>主类别< / op 
<？php echo $ option？> 
< / select> 
< select name =sub_catid =sub_cat> 
< option value =Non-Use> Sub-Category< / option> 
< div id =opt>< / div> 
< / select> 
  

PHP

  if（isset（$ _ POST ['val']））{
 $ mainCat = $ _POST ['val']; 
 $ subOption =''; 
 $ subName = []; 
包含../ storeSQL / sql_Connection.php; 
 $ sql =从类别中选择SUB_CAT其中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; 
 
  

解决方案

code> send function

  hr.send（val =+ val）; 
  

现在使用 sub_cat 来附加选项标记

  document.getElementById（sub_cat）。innerHTML = return_data ; 
  

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

因为你在这里没有发送任何密钥，所以下面的代码将总是失败并且不会返回到if块。

  if（isset （$ _POST ['val']））{
  

Little background,

I have a two dynamic select/option drop down which is echoed from PHP using sql queries.

If first drop box is selected the second drop box will contain information relevant to the first drop box, for example first drop box (console) second drop box (ps4/xbox one) etc. All this information is stored to a database.

If user select the first drop box javascript/AJAX sends that information to PHP/server, in PHP I then create a sql query and echo back all the available select/option for the second drop box.

However I am a bit stuck as I am not sure if this is the right way to implement the tags.

Nothing is showing on the option field.

UPDATED,

The first Drop box is working fine, the problem is the second one, with 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;
}

解决方案

Use key value pair inside send function

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

And for now use sub_cat to append option tag

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

And then add first option also before return_data

As you are not sending any key here, this below code will always fail and not go to if block

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

这篇关于使用AJAX / PHP / SQL更新选择/选项元素值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！