IT技术 - 根据下拉选择从数据库填充另一个选择下拉 - 吾爱随笔录

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

IT技术 php javascript ajax

2021-02-27 02:20:52

我正在构建一个网站来学习编码，并且正在尝试构建一个工具，用户单击包含从数据库cat 中提取的一些类别名称的选择/下拉列表，然后另一个选择将出现，其中包含从数据库subcat 中提取的子类别名称。这几乎与 Yelp's (转到类别)和 Yelp's (转到类别) 完全一样。

我也做了个图：

在此处输入图片说明

我已经有一个从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>";
?>

如何根据用户单击类别的内容制作子类别下拉列表并使其自动显示？非常感谢您的任何帮助！

4个回答

我只会用 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>

嘿，谢谢！工作得很好！我怎么能像那样为三组下拉菜单做到这一点？

2021-04-17 02:20:52

3 次选择时需要考虑的一些事项 - 当您更改选择 1 时，您可能希望将选择 3 改回无选项，您可能有一些没有子选择的选择，因此您应该检查 subcatOptions[x] 是否存在，否则 javascript 可能会出错试图访问一个未定义的数组

2021-04-20 02:20:52

我使用 subsubcat 作为表名.. 你需要一个外键来引用你的 subcats 表的 id

2021-04-24 02:20:52

你会注意到我也从 subcat 中选择了 catid，这样你就可以将 subcats 与 cat 联系起来......这是必要的

2021-05-02 02:20:52

是的没问题..基于我假设的第二个下拉列表的第三个下拉列表？

2021-05-02 02:20:52

由于子类别下拉列表中的数据取决于类别中选择的内容，因此您可能希望使用 ajax。您可以在类别下拉菜单上设置一个事件侦听器，当它发生变化时，您可以请求子类别下拉菜单的数据并填充它，有很多不同的方法来处理它，下面是一个选项（使用 jquery）让你开始了。

// warning sub optimal jquery code 
$(function(){

   // listen to events on the category dropdown
   $('#cat').change(function(){

       // don't do anything if use selects "Select Cat"
       if($(this).val() !== "Select Cat") {

           // subcat.php would return the list of option elements 
           // based on the category provided, if you have spaces in 
           // your values you will need to escape the values
           $.get('subcat.php?cat='+ $(this).val(), function(result){
               $('#subcat').html(result);
           });

       }

   });

});

如果您使用 AJAX，您将希望第二位代码是一个单独的 php 文件，您将通过 AJAX 调用该文件。在 AJAX 调用的回调中，只需执行 (pseudo-code): someContainingDivOrSomething.innerHtml = responseBody;。

请注意，直接在 PHP 显示文件中进行查询通常是一个坏主意（关注点分离）。还有其他几件事可以改进。然而，这会让你开始。

在登陆页面上制作这个 html 结构

<p><b>Category:</b><br />
 <?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect3' onChange='loadSubCats(this.value)' 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>";
?>

<div id='sub_categories'></div>

将js函数分配给类别下拉列表

function loadSubCats(value)
{
  $.post('load_sub_cats.php',{catid : value},function{data}
                                             {
                                              $('#sub_categories').html(data);

                                             });

}

现在在你的 load_sub_cats.php

<p><b>Subcat1:</b><br />
<?php
  $catid = $_POST['cat_id']
  $query="SELECT id,subcat FROM subcat where catid = $catid";
  $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>";
?>

您需要在此代码工作中包含 jquery。

其它你可能感兴趣的问题

上一篇对 React 中的异步请求使用 componentWillMount 或 componentDidMount 生命周期函数下一篇javascript module和 CORS