如何通过从数据库中获取值来制作可靠的下拉列表

Posted 2023-05-08

【中文标题】如何通过从数据库中获取值来制作可靠的下拉列表

【英文标题】：How Make a dependable dropdown list by taking values from Database

【发布时间】：2019-06-15 12:49:36

【问题描述】：

我想制作一个依赖于另一个下拉列表的下拉列表。两个下拉列表的值都是从数据库中检索的。我该怎么做？请帮忙。 另外，我如何将类别名称传递给数据库 mysql 查询页面（list.php）。

我目前有这个列出所有子类别..但我只想根据类别列出特定的子类别

<script>

    $(document).ready(function()
        $.getJSON("getlist.php", function(return_data)

            return_data.forEach(function(e,i)
                $('#catn').append('<option value= "'+e.catname+'">'+e.catname+'</option>');
            );

        );
    );

    $(document).ready(function()
        $.getJSON("list2.php",'catname':catname,function(return_data)

            return_data.forEach(function(h,i)
                $('#scatn').append('<option value= "'+h.subcatname+'">'+h.subcatname+'</option>');
            );

        );
    );

list.php

<?php   
 $catname=$_GET['catname'];
 $conn =mysqli_connect("localhost", "root", "", "project"); 

      $sql = "SELECT * FROM catd where catname='$catname'";  
      $result = mysqli_query($conn, $sql); 


$scat_arr = array();
 while( $row = mysqli_fetch_array($result) )
 
    $catid = $row['cid'];
    $catname = $row['catname'];
    $scat_arr[] = array("cid" => $catid, "catname" => $catname);

echo json_encode($scat_arr);
 ?>  

【参考方案1】：

您可以在 JS 中使用.change 函数。当第一个下拉菜单发生变化时，它会触发带有 POST 方法的 ajax 以发布到您的文件 list.php（您的查询运行的位置）。

jQuery(document).ready(function()     

     $('#catname').change(function()
            var catname = $(this).val();

            $.ajax(
                url:list.php,
                method:"POST",
                data:
                    catname:catname
                ,
                dataType:"json",
                success:function(data)

                 var $el = $("#subcatname");
                 $el.empty();
                  $el.append($("<option></option>")
                        .attr("value", '')
                        .attr("hidden",'')
                        .text('Select Sub Cat Name'));

       $.each(data, function(index, value)
        $el.append('<option 
               value="'+value.catid+'">'+value.catname+'</option>')
                );



); 

您必须 echo json_encode 输出，以便 ajax 识别返回的值。然后你可以通过使用 append 强制转换来附加值。

希望这会有所帮助。

【讨论】：

当我这样做时，它现在在类别下拉列表中没有显示任何内容:(

你能给我看看你的html文件吗？记住 HTML attr #catname 是猫名类别的 ID <select> 注意： 我提供的代码只是一个示例。

它的#catn th id of 标签..我在你的代码中改变了它..仍然没有得到:(

我只是将您的代码用作示例..我根据我的更改了值

好的，这就是逻辑。 #catn 不能为空，对吧？为什么只添加另一个查询，但这次是在 PHP 中，以便您可以轻松地将值转换为您的 <select>。然后只为子猫名称<select>添加js文件，这样当#catn改变它的值时，后端将根据#catn获取值并将其填充到子猫<select>