Apa cara terbaik dan termudah untuk Mengisi dropdown berdasarkan dropdown lain

Metode Pertama dan Terbaik (Jika Anda memiliki atau mungkin memiliki cukup data spesifik opsi)
Gunakan AJAX. Ini adalah cara termudah, saya pikir, dibandingkan dengan cara lain untuk menerapkan hal yang sama. Gunakan Jquery untuk mengimplementasikan AJAX. Itu membuat AJAX sepotong kue! Di sini saya membagikan sepotong kue saya untuk Anda -

Berikut ini kira-kira kode lengkap yang Anda butuhkan -

• Panggil fungsi javascript populateSecondDropdown() pada pilihan pertama Anda seperti ini -

      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 
  

• Tentukan panggilan ajax di dalam fungsi 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>
  

  • Dan akhirnya permintaan untuk mengambil opsi dropdown ke-2 dalam file prosesor AJAX fetchOptions.php. Anda dapat menggunakan $_POST['id_option'] di sini untuk mengambil opsi di bawahnya. Kueri basis data di sini harus mengambil option_id dan option_name bidang untuk setiap opsi (seperti yang diharapkan oleh kode jquery di dalam $.each ) dan kembalikan larik yang disandikan json seperti ini:-

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

Metode Kedua (Hanya menggunakan javascript)

• Ambil semua data untuk dropdown kedua yang dikelompokkan berdasarkan bidang dropdown pertama. Misalnya. mari kita ambil kursus yang ditampilkan di dropdown pertama dan mata pelajaran di bawah kursus yang ditampilkan di 2nd

  • Buat semua opsi dari dropdown ke-2. Tetapkan kelas yang sama dengan kursus sambil membuat opsi seperti ini:-

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

  • Kemudian tentukan onchange="displaySubjectsUnderThisCourse(this);" untuk dropdown pertama dan tulis javascript ini :-

     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); 
    
    
    }
    

    Ide dasarnya di sini adalah untuk menyembunyikan/menampilkan grup opsi tetapi kode saya mungkin memiliki kesalahan.

Terakhir, harap dicatat, metode kedua (mengambil semua nilai opsi) akan lebih baik hanya jika Anda memiliki jumlah data yang terbatas dan sangat yakin akan selalu ada lebih sedikit data di masa mendatang. Tapi, karena tidak ada yang bisa begitu yakin tentang masa depan, disarankan untuk selalu menggunakan metode AJAX.