Кой е най-добрият и лесен начин за попълване на падащо меню въз основа на друго падащо меню

Първият и най-добрият метод (ако имате или може да имате достатъчно данни за конкретни опции)
Използвайте AJAX. Мисля, че това е най-лесният начин в сравнение с другите начини за прилагане на същото. Използвайте Jquery за внедряване на AJAX. Това прави AJAX нещо като торта! Тук споделям моето парче торта за вас -

Следва приблизително пълният код, от който се нуждаете -

Извикайте функция на javascript populateSecondDropdown() при първия си избор по този начин -

    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

Дефинирайте ajax извикване вътре във функцията 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>

И накрая заявката за извличане на опциите на 2-ро падащо меню във файла на AJAX процесора fetchOptions.php. Можете да използвате $_POST['id_option'] тук, за да извлечете опциите под него. Заявката към базата данни тук трябва да извлече option_id и option_name полета за всяка опция (както се очаква от jquery кода в $.each ) и върнете json кодиран масив като този:-
```
return json_encode(array("subjects" => $resultOfQuery));
```

Втори метод (използване само на javascript)

Извличане на всички данни за второто падащо меню, групирани по полето на първото падащо меню. напр. нека вземем курсове, показани в първото падащо меню, и предмети под курсове, показани във второто

Създайте всички опции от второто падащо меню. Задайте класове, равни на курсовете, докато създавате опции като това:-

$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>";

След това дефинирайте onchange="displaySubjectsUnderThisCourse(this);" за първото падащо меню и напишете този javascript :-

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


}

Основната идея тук е да се скрият/показват групите с опции, но кодът ми може да има грешки.

И накрая, моля, имайте предвид, че вторият метод (извличане на всички стойности на опциите) би бил по-добър само ако имате ограничено малко количество данни и сте много сигурни, че винаги ще има по-малко данни в бъдеще. Но тъй като никой не може да бъде толкова сигурен за бъдещето, препоръчително е винаги да използвате метода AJAX.