Bagaimana untuk Mengisi Kandungan Dropdown Secara Dinamik Menggunakan JavaScript?

Populasi Dropdown Dinamik melalui Javascript

Dalam senario di mana anda perlu mengisi kandungan satu dropdown (B) berdasarkan pemilihan yang dibuat dalam menu lungsur lain (A) menggunakan JavaScript, tidak ada keperluan untuk pertanyaan AJAX yang kompleks. Sebaliknya, anda boleh memanfaatkan coretan kod berikut untuk mencapai ini:

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

Untuk menggunakan kod ini, masukkannya dalam fail JavaScript anda dan daftarkan fungsi configureDropDownLists sebagai pengendali acara onChange untuk lungsur turun pertama anda (A) :

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value="" selected>Select</option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select></code>

Kod ini menunjukkan cara mengisi dropdown kedua (ddl2) berdasarkan pemilihan dalam dropdown pertama (ddl1), menggunakan logik huruf suis untuk menentukan kandungan ddl2 secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Kandungan Dropdown Secara Dinamik Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!