Quelle est la meilleure et la plus simple façon de remplir une liste déroulante basée sur une autre liste déroulante

Première et meilleure méthode (si vous disposez ou pouvez disposer de suffisamment de données spécifiques à l'option)
Utilisez AJAX. C'est le moyen le plus simple, je pense, par rapport aux autres moyens d'implémenter la même chose. Utilisez Jquery pour implémenter AJAX. Cela fait d'AJAX un jeu d'enfant ! Ici, je partage mon morceau de gâteau pour vous -

Voici à peu près le code complet dont vous avez besoin -

Appelez une fonction javascript populateSecondDropdown() sur votre première sélection comme ceci -

    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

Définissez un appel ajax à l'intérieur de la fonction 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>

Et enfin la requête pour récupérer les options de la 2e liste déroulante dans le fichier du processeur AJAX fetchOptions.php. Vous pouvez utiliser $_POST['id_option'] ici pour récupérer les options en dessous. La requête de base de données ici devrait récupérer le option_id et option_name champs pour chaque option (comme prévu par le code jquery à l'intérieur de $.each ) et renvoie un tableau encodé en json comme celui-ci :-
```
return json_encode(array("subjects" => $resultOfQuery));
```

Deuxième méthode (en utilisant uniquement javascript)

Récupérez toutes les données de la deuxième liste déroulante regroupées par le champ de la première liste déroulante. Par exemple. prenons les cours affichés dans le premier menu déroulant et les matières sous les cours affichés dans le 2nd

Créez toutes les options de la 2e liste déroulante. Attribuez des classes égales aux cours tout en créant les options comme ceci :-

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

Définissez ensuite onchange="displaySubjectsUnderThisCourse(this);" pour la première liste déroulante et écrivez ce 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); 


}

L'idée de base ici est de masquer/afficher les groupes d'options mais mon code peut contenir des erreurs.

Enfin, veuillez noter que la deuxième méthode (récupération de toutes les valeurs d'option) ne serait meilleure que si vous disposez d'une petite quantité de données limitée et que vous êtes certain qu'il y aura toujours moins de données à l'avenir. Mais, puisque personne ne peut être aussi certain de l'avenir, il est conseillé d'utiliser toujours la méthode AJAX.