¿Cuál es la forma mejor y más fácil de completar un menú desplegable en función de otro menú desplegable?

Primer y mejor método (si tiene o puede tener suficientes datos específicos de opciones)
Utiliza AJAX. Es la forma más fácil, creo, en comparación con las otras formas de implementar lo mismo. Use Jquery para implementar AJAX. ¡Hace que AJAX sea pan comido! Aquí les comparto mi pedazo de pastel -

El siguiente es aproximadamente el código completo que necesita:

• Llame a una función javascript populateSecondDropdown() en su primera selección como esta -

      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 
  

• Defina una llamada ajax dentro de la función 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>
  

  • Y finalmente, la consulta para obtener las opciones del segundo menú desplegable en el archivo del procesador AJAX fetchOptions.php. Puede usar $_POST['id_option'] aquí para buscar las opciones debajo de él. La consulta de la base de datos aquí debería obtener el option_id y option_name campos para cada opción (como se esperaba por el código jquery dentro de $.each ) y devolver una matriz codificada json como esta:-

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

Segundo método (Usando solo javascript)

• Obtenga todos los datos para el segundo menú desplegable agrupados por el campo del primer menú desplegable. P.ej. tomemos los cursos que se muestran en el primer menú desplegable y las materias de los cursos que se muestran en el segundo

  • Cree todas las opciones del segundo menú desplegable. Asigne clases iguales a los cursos mientras crea las opciones como esta:-

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

  • Luego defina onchange="displaySubjectsUnderThisCourse(this);" para el primer menú desplegable y escribe este 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); 
    
    
    }
    

    La idea básica aquí es ocultar/mostrar grupos de opciones, pero mi código puede tener errores.

Finalmente, tenga en cuenta que el segundo método (obtener todos los valores de las opciones) sería mejor solo si tiene una pequeña cantidad limitada de datos y está muy seguro de que siempre habrá menos datos en el futuro. Pero, como nadie puede estar tan seguro del futuro, es recomendable utilizar siempre el método AJAX.