Bagaimana untuk Auto Kemas Kini Pilihan dalam Menu Jatuh Bawah Kedua Berdasarkan Pilihan dalam Menu Jatuh Bawah Pertama?

Pilihan Autokemas kini Menu Drop Down Pertama dalam Menu Drop Down Kedua

Pernyataan Masalah:

Bangunkan dua drop- menu bawah di mana pilihan dalam menu lungsur kedua bergantung pada pilihan yang dibuat dalam menu lungsur pertama. Fungsi ini dikehendaki tanpa menggunakan pangkalan data.

Penyelesaian:

HTML Awal:

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

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

JavaScript:

Tentukan fungsi untuk mengendalikan peristiwa perubahan menu lungsur turun pertama dan kemas kini pilihan dalam menu lungsur kedua dengan sewajarnya.

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option><option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option><option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

Penjelasan:

Dalam contoh ini, pilihan untuk menu lungsur kedua dikodkan dalam fungsi JavaScript. Apabila pengguna memilih kategori daripada menu lungsur pertama, peristiwa perubahan mencetuskan fungsi JavaScript. Berdasarkan kategori yang dipilih, fungsi mengemas kini pilihan dalam menu lungsur kedua secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Auto Kemas Kini Pilihan dalam Menu Jatuh Bawah Kedua Berdasarkan Pilihan dalam Menu Jatuh Bawah Pertama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!