php - 如何通过从数据库中获取值来创建可靠的下拉列表

Question

我想创建一个依赖于另一个下拉列表的下拉列表。两个下拉列表的值都是从数据库中检索的。我该怎么做？请帮忙。另外我如何将类别名称传递到数据库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>');
            });

        });
    });

列表.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);
 ?>  

Answer 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>')
                });



}); 

您必须回显json_encode输出，以便ajax识别返回值。然后您可以通过使用追加进行转换来附加值。

希望这有帮助。