javascript - 3 通过Ajax和PHP实现依赖下拉

Question

美好的一天，

我有 3 个 PHP 页面('test1.php'、'res.php'、'desc.php')，所以我想让 3 个依赖下拉。所有下拉菜单都依赖于之前的下拉菜单。因此，当我从第一个下拉列表中选择一个项目时，所有数据都会通过“res.php”从数据库中获取，并作为项目添加到第二个下拉列表中。但是当我选择第二个下拉菜单时，页面将刷新并返回到第一步，所有选择的下拉项目都消失了。

test1.php

<script>

function load_sub_cat(str){     

      var xmlhttp;
      xmlhttp=new XMLHttpRequest();
      xmlhttp.open("get","res.php?q="+str,false);

      xmlhttp.send();   

      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;     

            }
  </script>

        <select name="users" onChange="load_sub_cat(this.value)">
        <option value="0">Select a restaurant</option>
   <?php

         $db->setQuery("SELECT id, name FROM yh5lw_rest_dropdown where active=1");
         $results = $db->loadObjectList();

         foreach ($results as $result) {

         echo "<option value=".$result->id.">". $result->name."</option>";

        }

  ?>

   </select>
   <div id="txtHint"></div>

res.php

 <script>
 function load_sub_cat(str){


     var xmlhttp1;
     xmlhttp1=new XMLHttpRequest();
     xmlhttp1.open("get","desc.php?desc="+str,false);
     xmlhttp1.send(); 
     document.getElementById("txt23").innerHTML=xmlhttp1.responseText;

 }
</script>

<select name="users1" onChange="load_sub_cat(this.value)">
    <option value="">Select a main course</option>
    <?php
    $q = intval($_GET['q']);

    $db->setQuery("SELECT price,id, nameEN , nameFA FROM yh5lw_food_dropdown where active=1 AND res_id ='".$q."'");
    $results = $db->loadObjectList();

    foreach ($results as $result) {
        echo "<option value=".$result->id.">". $result->nameEN." &nbsp; (".$result->price"</option>";
        }
        $count++ ;
    }
    ?>
    </select> 
    <div id="txt23"></div>

描述.php

<?php echo $_GET['desc'] ?>

Answer 1

虽然您可以为此编写自己的代码，但您不需要为此功能重新发明轮子 - 尝试 jQuery Cascading Dropdown Plugin ，它是免费的，并且完全可以做您想做的事情。它易于设置，支持 AJAX，并且您只需使用服务器端代码来进行 AJAX 调用。