Hvad er den bedste og nemmeste måde at udfylde en dropdown baseret på en anden dropdown

Første og bedste metode (hvis du har eller måske har nok mulighedsspecifikke data)
Brug AJAX. Det er den nemmeste måde, synes jeg, sammenlignet med de andre måder at implementere det samme på. Brug Jquery til at implementere AJAX. Det gør AJAX til et stykke kage! Her deler jeg mit stykke kage til dig -

Følgende er nogenlunde den komplette kode, du har brug for -

• Kald en javascript-funktion populateSecondDropdown() på dit første valg på denne måde -

      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 
  

• Definer et ajax-kald inde i 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>
  

  • Og endelig forespørgslen om at hente 2nd dropdown muligheder i AJAX processor filen fetchOptions.php. Du kan bruge $_POST['id_option'] her til at hente mulighederne under den. Databaseforespørgslen her skulle hente option_id og option_name felter for hver mulighed (som forventet af jquery-koden inde i $.each ) og returner et json-kodet array som dette:-

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

Anden metode (kun ved brug af javascript)

• Hent alle data for den anden dropdown grupperet efter feltet i den første dropdown. For eksempel. lad os tage kurser vist i den første dropdown og emner under kurser vist i 2.

  • Opret alle mulighederne i den 2. rullemenu. Tildel klasser svarende til kurserne, mens du opretter mulighederne som denne:-

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

  • Definer derefter onchange="displaySubjectsUnderThisCourse(this);" for den første dropdown og skriv dette 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); 
    
    
    }
    

    Den grundlæggende idé her er at skjule/vise valgmuligheder, men min kode kan have fejl.

Bemærk endelig, at den anden metode (hentning af alle indstillingsværdier) kun ville være bedre, hvis du har begrænset lille mængde data og er meget sikker på, at der altid vil være mindre data i fremtiden. Men da ingen kan være så sikker på fremtiden, er det tilrådeligt altid at bruge AJAX-metoden.