Was ist der beste und einfachste Weg, um ein Dropdown-Menü basierend auf einem anderen Dropdown-Menü zu füllen?

Erste und beste Methode (wenn Sie genügend optionsspezifische Daten haben oder haben könnten)
Verwenden Sie AJAX. Es ist meiner Meinung nach der einfachste Weg, verglichen mit den anderen Möglichkeiten, dasselbe zu implementieren. Verwenden Sie Jquery, um AJAX zu implementieren. Es macht AJAX zum Kinderspiel! Hier teile ich mein Stück Kuchen für dich -

Im Folgenden finden Sie ungefähr den vollständigen Code, den Sie benötigen -

• Rufen Sie eine Javascript-Funktion populateSecondDropdown() bei Ihrer ersten Auswahl wie folgt auf:

      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 
  

• Definieren Sie einen Ajax-Aufruf innerhalb der Funktion 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>
  

  • Und schließlich die Abfrage zum Abrufen der Optionen des zweiten Dropdowns in der AJAX-Prozessordatei fetchOptions.php. Sie können hier $_POST['id_option'] verwenden, um die Optionen darunter abzurufen. Die Datenbankabfrage hier sollte die option_id abrufen und option_name Felder für jede Option (wie vom jquery-Code in $.each erwartet). ) und geben Sie ein json-codiertes Array wie folgt zurück:-

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

Zweite Methode (nur Javascript verwenden)

• Rufen Sie alle Daten für das zweite Dropdown-Menü ab, gruppiert nach dem Feld des ersten Dropdown-Menüs. Z.B. nehmen wir Kurse, die in der ersten Dropdown-Liste angezeigt werden, und Fächer unter den Kursen, die in der zweiten angezeigt werden

  • Erstellen Sie alle Optionen des 2. Dropdown-Menüs. Weisen Sie den Kursen Klassen zu, während Sie die Optionen wie folgt erstellen:-

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

  • Dann definieren Sie onchange="displaySubjectsUnderThisCourse(this);" für das erste Dropdown und schreiben Sie dieses 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); 
    
    
    }
    

    Die Grundidee hier ist, Optionsgruppen auszublenden/anzuzeigen, aber mein Code kann Fehler enthalten.

Bitte beachten Sie schließlich, dass die zweite Methode (Abrufen aller Optionswerte) nur dann besser wäre, wenn Sie nur eine begrenzte kleine Datenmenge haben und sehr sicher sind, dass es in Zukunft immer weniger Daten geben wird. Da sich aber niemand so sicher über die Zukunft sein kann, empfiehlt es sich, immer die AJAX-Methode zu verwenden.