Wat is de beste en gemakkelijkste manier om een ​​vervolgkeuzelijst te vullen op basis van een andere vervolgkeuzelijst?

Eerste en beste methode (als u voldoende optiespecifieke gegevens heeft of mogelijk heeft)
Gebruik AJAX. Het is de gemakkelijkste manier, denk ik, in vergelijking met de andere manieren om hetzelfde te implementeren. Gebruik JQuery om AJAX te implementeren. Het maakt AJAX een fluitje van een cent! Hier deel ik mijn stukje taart voor jullie -

Hieronder volgt ongeveer de volledige code die je nodig hebt -

• Roep een javascript-functie populateSecondDropdown() aan bij uw eerste selectie als volgt -

      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 
  

• Definieer een ajax-aanroep in de functie 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>
  

  • En tot slot de vraag om de opties van de 2e vervolgkeuzelijst op te halen in het AJAX-processorbestand fetchOptions.php. Je kunt $_POST['id_option'] hier gebruiken om de opties eronder op te halen. De databasequery hier zou de option_id . moeten ophalen en option_name velden voor elke optie (zoals verwacht door de jQuery-code in $.each ) en retourneer een json-gecodeerde array als volgt:-

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

Tweede methode (met alleen javascript)

• Haal alle gegevens op voor de tweede vervolgkeuzelijst, gegroepeerd op het veld van de eerste vervolgkeuzelijst. bijv. laten we cursussen volgen die worden weergegeven in de eerste vervolgkeuzelijst en onderwerpen onder cursussen die worden weergegeven in de 2e

  • Maak alle opties van de 2e vervolgkeuzelijst. Wijs klassen toe die gelijk zijn aan de cursussen terwijl u de opties als volgt creëert:-

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

  • Definieer vervolgens onchange="displaySubjectsUnderThisCourse(this);" voor de eerste vervolgkeuzelijst en schrijf dit 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); 
    
    
    }
    

    Het basisidee hier is om optiegroepen te verbergen/weer te geven, maar mijn code kan fouten bevatten.

Houd er ten slotte rekening mee dat de tweede methode (alle optiewaarden ophalen) alleen beter is als u een kleine hoeveelheid gegevens hebt en er zeker van bent dat er in de toekomst altijd minder gegevens zullen zijn. Maar aangezien niemand zo zeker kan zijn over de toekomst, is het raadzaam om altijd de AJAX-methode te gebruiken.