Jaki jest najlepszy i najłatwiejszy sposób na wypełnienie listy rozwijanej na podstawie innej listy rozwijanej?

Pierwsza i najlepsza metoda (jeśli masz lub masz wystarczającą ilość danych specyficznych dla opcji)
Użyj AJAX. Myślę, że to najłatwiejszy sposób w porównaniu z innymi sposobami realizacji tego samego. Użyj JQuery, aby zaimplementować AJAX. To sprawia, że ​​AJAX to bułka z masłem! Tutaj dzielę się dla Ciebie moim kawałkiem ciasta -

Poniżej znajduje się w przybliżeniu kompletny kod, którego potrzebujesz -

• Wywołaj funkcję JavaScript populateSecondDropdown() przy pierwszym wyborze w ten sposób -

      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 
  

• Zdefiniuj wywołanie ajax wewnątrz funkcji 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>
  

  • I na koniec zapytanie, aby pobrać opcje drugiego menu rozwijanego w pliku procesora AJAX fetchOptions.php. Możesz użyć $_POST['id_option'] tutaj, aby pobrać opcje pod nim. Zapytanie do bazy danych powinno pobrać option_id i option_name pola dla każdej opcji (zgodnie z oczekiwaniem przez kod jquery wewnątrz $.each ) i zwróć tablicę zakodowaną w formacie json w następujący sposób:-

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

Druga metoda (przy użyciu tylko javascriptu)

• Pobierz wszystkie dane z drugiego menu pogrupowane według pola pierwszego menu. Np. weźmy kursy wyświetlane w pierwszym menu rozwijanym i przedmioty pod kursami wyświetlanymi w drugim

  • Utwórz wszystkie opcje drugiego menu rozwijanego. Przypisz klasy równe kursom podczas tworzenia takich opcji:-

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

  • Następnie zdefiniuj onchange="displaySubjectsUnderThisCourse(this);" dla pierwszego menu rozwijanego i napisz ten 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); 
    
    
    }
    

    Podstawową ideą jest tutaj ukrywanie/wyświetlanie grup opcji, ale mój kod może zawierać błędy.

Na koniec pamiętaj, że druga metoda (pobranie wszystkich wartości opcji) byłaby lepsza tylko wtedy, gdy masz ograniczoną ilość danych i jesteś pewien, że w przyszłości zawsze będzie ich mniej. Ale ponieważ nikt nie może być tak pewny przyszłości, wskazane jest, aby zawsze używać metody AJAX.