Qual é a melhor e mais fácil maneira de preencher uma lista suspensa com base em outra lista suspensa

    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 

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

• 
  E finalmente a consulta para buscar as opções do segundo dropdown no arquivo do processador AJAX fetchOptions.php. Você pode usar $_POST['id_option'] aqui para buscar as opções abaixo dele. A consulta do banco de dados aqui deve buscar o option_id e option_name campos para cada opção (como esperado pelo código jquery dentro de $.each ) e retorne uma matriz codificada em json como esta:-
  

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

• 
  Crie todas as opções do segundo menu suspenso. Atribua aulas iguais aos cursos enquanto cria as opções 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>";
  

• 
  Em seguida, defina onchange="displaySubjectsUnderThisCourse(this);" para o primeiro menu suspenso e escreva 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); 
  
  
  }
  

  
  A idéia básica aqui é ocultar/exibir grupos de opções, mas meu código pode conter erros.