Как создать надежный выпадающий список, взяв значения из базы данных

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

        });
    });

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);
 ?>  

Answer 1

Вы можете использовать функцию .change в JS. В то время как первый раскрывающийся список меняется, он запускает ajax с методом POST для отправки в ваш файл 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 распознал возвращаемое значение. И затем вы можете добавить значения путем приведения его с помощью append.

Надеется, что это помогло.