Jaký je nejlepší a nejjednodušší způsob, jak vyplnit rozevírací seznam na základě jiného rozevíracího seznamu

První a nejlepší metoda (Pokud máte nebo můžete mít dostatek dat specifických pro jednotlivé možnosti)
Používejte AJAX. Myslím, že je to nejjednodušší způsob ve srovnání s jinými způsoby, jak totéž implementovat. Použijte Jquery k implementaci AJAX. Dělá to z AJAXu hračku! Zde se pro vás podělím o svůj kousek dortu -

Následuje zhruba úplný kód, který potřebujete -

• Při prvním výběru zavolejte javascriptovou funkci populateSecondDropdown() takto -

      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 
  

• Definujte volání ajax uvnitř funkce 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>
  

  • A nakonec dotaz na načtení možností 2. rozevíracího seznamu v souboru fetchOptions.php procesoru AJAX. Zde můžete použít $_POST['id_option'] k načtení možností pod ním. Databázový dotaz by zde měl načíst option_id a option_name pole pro každou možnost (jak očekává kód jquery v $.each ) a vrátí pole kódované json takto:-

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

Druhá metoda (pouze pomocí javascriptu)

• Načtěte všechna data pro druhý rozevírací seznam seskupená podle pole prvního rozbalovacího seznamu. Např. vezměme si kurzy zobrazené v první rozevírací nabídce a předměty pod kurzy zobrazené ve 2

  • Vytvořte všechny možnosti 2. rozevíracího seznamu. Přiřaďte třídy stejné jako kurzy při vytváření možností takto:-

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

  • Poté definujte onchange="displaySubjectsUnderThisCourse(this);" pro první rozevírací seznam a napište tento 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); 
    
    
    }
    

    Základní myšlenkou je skrýt/zobrazit skupiny možností, ale můj kód může obsahovat chyby.

A konečně, mějte na paměti, že druhá metoda (načtení všech hodnot možností) by byla lepší pouze v případě, že máte omezené malé množství dat a jste si velmi jisti, že v budoucnu bude vždy dat méně. Ale protože si nikdo nemůže být tak jistý budoucností, je vhodné vždy používat metodu AJAX.