Bagaimana untuk Mengisi Satu Dropdown Berdasarkan Pemilihan dalam Satu Lagi Menggunakan JavaScript?

Isi satu lungsur turun berdasarkan pemilihan dalam yang lain menggunakan JavaScript

Apabila berhadapan dengan tugas mengemas kini pilihan secara dinamik dalam satu lungsur berdasarkan pemilihan yang dibuat dalam yang lain, ia adalah penting untuk mengelakkan kerumitan yang tidak perlu seperti pertanyaan pangkalan data. Mari kita terokai penyelesaian berasaskan JavaScript yang mudah yang mencapai ini tanpa memerlukan panggilan AJAX.

Untuk menggambarkan pendekatan ini, pertimbangkan senario di mana anda mempunyai dua senarai lungsur turun: Dropdown A dengan pilihan seperti "Warna," " Shapes," dan "Nama" dan Dropdown B. Kami ingin mengisi pilihan dalam Dropdown B berdasarkan pemilihan yang dibuat dalam Dropdown A.

Kod Contoh

Fungsi JavaScript berikut menunjukkan cara untuk mencapai fungsi 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);
}

Penanda HTML

Penanda HTML berikut termasuk dua senarai lungsur turun:

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

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

Penggunaan

Untuk menggunakan fungsi ini , hanya panggil fungsi configureDropDownLists, lulus dropdown pertama (ddl1) dan dropdown kedua (ddl2) sebagai argumen. Fungsi ini akan mengendalikan populasi dinamik Dropdown B berdasarkan pemilihan yang dibuat dalam Dropdown A.

Coretan kod ini menunjukkan penyelesaian berfungsi yang lengkap, membolehkan anda mengisi secara dinamik satu dropdown berdasarkan pemilihan yang dibuat dalam yang lain menggunakan JavaScript , tanpa memerlukan panggilan pangkalan data atau permintaan AJAX.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Satu Dropdown Berdasarkan Pemilihan dalam Satu Lagi Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!