根据下拉选择从数据库中填充另一个选择下拉菜单

小编典典

根据下拉选择从数据库中填充另一个选择下拉菜单

ajax

我正在建立一个网站来学习编码，并且正在尝试建立一个工具，用户单击一个选择/下拉列表，其中包含从数据库 cat
提取的某些类别名称，然后另一个选择与从数据库 subcat
提取的子类别名称一起出现。这几乎与Yelp的（向下分类）完全一样，就像Yelp的（向下分类）一样。

我还做了一个图：

在此处输入图片说明

我已经有一个从 cat 数据库中提取的类别下拉列表：

<p><b>Category:</b><br />
 <?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect3' class='e1'><option value='0'>Please Select A       Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."    </option>";

  }

echo"</select>";
?>

我有一个从subcat数据库中提取的subcat：

<p><b>Subcat1:</b><br />
<?php
  $query="SELECT id,subcat FROM subcat";
  $result = mysql_query ($query);
  echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

 echo"</select>";
?>

如何根据用户单击类别并使其自动显示来创建子类别下拉菜单？非常感谢您提供的所有帮助！

阅读 294

2020-07-26

共1个答案

小编典典

我只是将变量放在php中的javascript中，然后使用javascript函数..不需要jquery或AJAX。

但是，无论如何，您都需要具有子类别的外键。即-对于subcat表中的每个记录，您都需要给它一个catid以便进行引用…

<?php
  $db = new mysqli('localhost','user','password','dbname');//set your database handler
  $query = "SELECT id,cat FROM cat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("id" => $row['id'], "val" => $row['cat']);
  }

  $query = "SELECT id, catid, subcat FROM subcat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
    <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>

  </head>

  <body onload='loadCategories()'>
    <select id='categoriesSelect'>
    </select>

    <select id='subcatsSelect'>
    </select>
  </body>
</html>

2020-07-26