Vad är det bästa och enklaste sättet att fylla i en rullgardinsmeny baserat på en annan rullgardinsmeny

Första och bästa metoden (om du har eller kan ha tillräckligt med alternativspecifik data)
Använd AJAX. Det är det enklaste sättet, tror jag, jämfört med de andra sätten att implementera detsamma. Använd Jquery för att implementera AJAX. Det gör AJAX till en piece of cake! Här delar jag med mig av min tårta för dig -

Följande är ungefär den fullständiga koden du behöver -

• Anropa en javascript-funktion populateSecondDropdown() på ditt första val så här -

      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 
  

• Definiera ett ajax-anrop inuti populateSecondDropdown()-funktionen -

  <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>
  

  • Och slutligen frågan för att hämta alternativen för den andra rullgardinsmenyn i AJAX-processorfilen fetchOptions.php. Du kan använda $_POST['id_option'] här för att hämta alternativen under den. Databasfrågan här bör hämta option_id och option_name fält för varje alternativ (som förväntat av jquery-koden inuti $.each ) och returnera en json-kodad array så här:-

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

Andra metoden (med endast javascript)

• Hämta all data för den andra rullgardinsmenyn grupperad efter fältet i den första rullgardinsmenyn. T.ex. låt oss ta kurser som visas i den första rullgardinsmenyn och ämnen under kurser som visas i den andra

  • Skapa alla alternativ i den andra rullgardinsmenyn. Tilldela klasser lika med kurserna samtidigt som du skapar alternativen så här:-

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

  • Definiera sedan onchange="displaySubjectsUnderThisCourse(this);" för den första rullgardinsmenyn och skriv detta 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); 
    
    
    }
    

    Grundidén här är att dölja/visa alternativgrupper men min kod kan ha fel.

Slutligen, observera att den andra metoden (att hämta alla alternativvärden) skulle vara bättre bara om du har begränsade små mängder data och är mycket säker på att det alltid kommer att finnas mindre data i framtiden. Men eftersom ingen kan vara så säker på framtiden, är det lämpligt att alltid använda AJAX-metoden.