Bagaimana untuk Mengisi Dropdown Secara Dinamik Berdasarkan Pemilihan tanpa Pertanyaan Pangkalan Data?

Isi Secara Dinamik Dropdown Berdasarkan Pemilihan

Apabila menghadapi tugas mengubah suai kandungan satu dropdown berdasarkan pemilihan yang dibuat dalam yang lain, fahami cara untuk melaksanakan fungsi ini dengan JavaScript adalah penting. Tidak seperti situasi yang memerlukan pertanyaan pangkalan data, proses ini boleh dipermudahkan tanpa menggunakan AJAX.

Untuk membantu anda, kami menyediakan contoh kod JavaScript yang ringkas dan berkesan yang menunjukkan cara mengisi dropdown kedua (Dropdown B) berdasarkan pada pilihan yang dibuat dalam dropdown pertama (Dropdown A). Kod ini tidak melibatkan sebarang pengambilan data luaran atau pertanyaan pangkalan data:

<code class="javascript">function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}</code>

Dalam kod ini, kami telah mentakrifkan tiga tatasusunan (warna, bentuk dan nama) yang mengandungi nilai yang harus dipaparkan dalam Dropdown B untuk setiap pilihan yang sepadan dalam Dropdown A.

Apabila pengguna memilih pilihan daripada Dropdown A, fungsi configureDropDownLists dipanggil. Berdasarkan pilihan yang dipilih, fungsi ini mengosongkan kandungan Dropdown B dan mengisinya semula dengan nilai yang sesuai daripada tatasusunan yang berkaitan.

Anda boleh melaksanakan kod ini dengan membuat dua dropdown dalam dokumen HTML anda dan menggunakan acara onchange pengendali pada dropdown pertama untuk mencetuskan fungsi yang mengisi dropdown kedua.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Dropdown Secara Dinamik Berdasarkan Pemilihan tanpa Pertanyaan Pangkalan Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!