Qual è il modo migliore e più semplice per popolare un menu a discesa in base a un altro menu a discesa

Primo e miglior metodo (se hai o potresti avere abbastanza dati specifici per le opzioni)
Usa AJAX. È il modo più semplice, penso, rispetto agli altri modi per implementare lo stesso. Usa Jquery per implementare AJAX. Rende AJAX un gioco da ragazzi! Qui condivido la mia fetta di torta per te -

Di seguito è riportato più o meno il codice completo di cui hai bisogno -

• Chiama una funzione javascript populateSecondDropdown() alla prima selezione in questo modo -

      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 
  

• Definisci una chiamata ajax all'interno della funzione 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>
  

  • E infine la query per recuperare le opzioni del secondo menu a discesa nel file del processore AJAX fetchOptions.php. Puoi usare $_POST['id_option'] qui per recuperare le opzioni sotto di esso. La query del database qui dovrebbe recuperare option_id e option_name campi per ogni opzione (come previsto dal codice jquery all'interno di $.each ) e restituire un array codificato json come questo:-

    return json_encode(array("subjects" => $resultOfQuery));
    

Secondo metodo (utilizzando solo javascript)

• Recupera tutti i dati per il secondo elenco a discesa raggruppati per il campo del primo elenco a discesa. Per esempio. prendiamo i corsi visualizzati nel primo menu a discesa e le materie sotto i corsi visualizzati nel 2

  • Crea tutte le opzioni del 2° menu a tendina. Assegna classi uguali ai corsi mentre crei le opzioni in questo modo:-

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

  • Quindi definisci onchange="displaySubjectsUnderThisCourse(this);" per il primo menu a discesa e scrivi questo 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'idea di base qui è quella di nascondere/visualizzare i gruppi di opzioni, ma il mio codice potrebbe contenere errori.

Infine, tieni presente che il secondo metodo (recupero di tutti i valori delle opzioni) sarebbe migliore solo se hai una piccola quantità di dati limitata e sei molto sicuro che ci saranno sempre meno dati in futuro. Ma poiché nessuno può essere così sicuro del futuro, è consigliabile utilizzare sempre il metodo AJAX.