Cách tốt nhất và dễ nhất để điền một menu thả xuống dựa trên một menu thả xuống khác là gì

Phương pháp đầu tiên và tốt nhất (Nếu bạn có hoặc có thể có đủ dữ liệu tùy chọn cụ thể)
Sử dụng AJAX. Tôi nghĩ đó là cách dễ nhất so với các cách khác để thực hiện giống nhau. Sử dụng Jquery để triển khai AJAX. Nó làm cho AJAX trở thành một miếng bánh! Đây, tôi chia sẻ miếng bánh của tôi cho bạn -

Sau đây đại khái là mã hoàn chỉnh mà bạn cần -

Gọi một hàm javascript populateSecondDropdown () trên lựa chọn đầu tiên của bạn như thế này -

    echo "<select  name='course[]' value='' multiple='multiple' size=10 onchange='populateSecondDropdown(this, 'http://yourprojectUrl','Any Subject');'>";
            // printing the list box select command
            echo "<option value=''>All</option>";
            while($ntc=mysqli_fetch_array($queryc))
            {//Array or records stored in $nt
                echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>";
                /* Option values are added by looping through the array */
            }
            echo "</select>";// Closing of list box

Xác định lệnh gọi ajax bên trong hàm populateSecondDropdown () -

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script  type="text/javascript">  
    function populateSecondDropdown(object,baseUrl)
    {
        $.ajax({
        type: "POST", 
        url: baseUrl+"/ajax/fetchOptions.php", 
        data: { id_option: $(object).val(), operation: 'get_subjects' },
        dataType: "json",
        success: function(data) 
        {
            //Clear options corresponding to earlier option of first dropdown
           $('select#secondDropdown').empty(); 
           $('select#secondDropdown').append('<option value="0">Select Option</option>');
                   //Populate options of the second dropdown
           $.each( data.subjects, function() 
           {    
               $('select#secondDropdown').append('<option value="'+$(this).attr('option_id')+'">'+$(this).attr('option_name')+'</option>');
           });
           $('select#secondDropdown').focus();
        },
            beforeSend: function() 
            {
                $('select#secondDropdown').empty();
                $('select#secondDropdown').append('<option value="0">Loading...</option>');
            },
            error: function() 
           {
              $('select#secondDropdown').attr('disabled', true);
              $('select#secondDropdown').empty();
               $('select#secondDropdown').append('<option value="0">No Options</option>');
          }
        });
     }
</script>

Và cuối cùng là truy vấn để tìm nạp các tùy chọn của menu thả xuống thứ 2 trong tệp bộ xử lý AJAX fetchOptions.php. Bạn có thể sử dụng $ _POST ['id_option'] tại đây để tìm nạp các tùy chọn trong đó. Truy vấn cơ sở dữ liệu ở đây sẽ tìm nạp option_id và option_name các trường cho mọi tùy chọn (như mong đợi bởi mã jquery bên trong $.each ) và trả về một mảng được mã hóa json như sau:-
```
return json_encode(array("subjects" => $resultOfQuery));
```

Phương pháp thứ hai (Chỉ sử dụng javascript)

Tìm nạp tất cả dữ liệu cho menu thả xuống thứ hai được nhóm theo trường của menu thả xuống đầu tiên. Ví dụ. hãy tham gia các khóa học được hiển thị trong menu thả xuống đầu tiên và các môn học trong các khóa học được hiển thị trong phần thứ hai

Tạo tất cả các tùy chọn của menu thả xuống thứ 2. Chỉ định các lớp ngang bằng với các khóa học trong khi tạo các tùy chọn như sau:-

$querycourse = "SELECT course, subject FROM subjects WHERE subject IS NOT NULL GROUP BY course ";
$procc = mysqli_prepare($link, $querycourse);
$queryc =  mysqli_query($link, $querycourse) or die(mysqli_error($link));

echo "<select  name='subjects[]' value='' multiple='multiple' size=100>";
echo "<option value=''>All</option>";
            while($ntc=mysqli_fetch_array($queryc))
            {//Array or records stored in $nt
                echo "<option value=\"$ntc[subject]\" class=\"$ntc[course]\">\"$ntc[subject]\"</option>";
            }
            echo "</select>";

Sau đó xác định onchange="displaySubjectsUnderThisCourse(this);" cho menu thả xuống đầu tiên và viết javascript này:-

 function displaySubjectsUnderThisCourse(object)
 {
     var selectedCourse = $(object).val();
    //Display the options with class = the selected option from first dropdown
    $("."+selectedCourse).removeClass("hidden"); //define a class hidden with display:none;

   $('option:not(.selectedCourse)').hide();  // hide all options whose class is other than selectedCourse - Not sure whether this will work or not, though

  //Deselect any previous selections
  //If single option selection is allowed
  $('select#secondDropdown option').attr('selected', false); 
  // or following if multiple selection is allowed (needed for IE)
  $('select#secondDropdown option').attr('selectedIndex', -1); 


}

Ý tưởng cơ bản ở đây là ẩn / hiển thị các nhóm tùy chọn nhưng mã của tôi có thể có lỗi.

Cuối cùng, xin lưu ý rằng phương pháp thứ hai (tìm nạp tất cả các giá trị tùy chọn) sẽ tốt hơn chỉ khi bạn có lượng dữ liệu nhỏ hạn chế và rất chắc chắn rằng sẽ luôn có ít dữ liệu hơn trong tương lai. Tuy nhiên, vì không ai có thể chắc chắn về tương lai, bạn nên sử dụng phương pháp AJAX luôn luôn.