Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Bagaimana untuk Mengemas kini Pilihan Dropdown Secara Automatik Berdasarkan Pemilihan Dropdown Pertama Tanpa Pangkalan Data?

Bagaimana untuk Mengemas kini Pilihan Dropdown Secara Automatik Berdasarkan Pemilihan Dropdown Pertama Tanpa Pangkalan Data?

DDD
DDDasal
2024-10-21 06:48:29756semak imbas

How to Update Dropdown Options Automatically Based on First Dropdown Selection Without a Database?

Cara Mengemas kini Pilihan Secara Automatik dalam Dropdown Kedua Berdasarkan Pemilihan dalam Dropdown Pertama Tanpa Menggunakan Pangkalan Data

Anda mempunyai dua dropdown di mana pilihan tidak diambil daripada pangkalan data. Jatuh turun pertama membolehkan pengguna memilih kategori. Pilihan dalam dropdown kedua bergantung pada pilihan dalam dropdown pertama.

Contohnya, jika pengguna memilih pilihan First dalam dropdown pertama, dropdown kedua harus memaparkan pilihan Telefon Pintar dan Pengecas. Jika pengguna menukar pilihan mereka kepada pilihan Kedua, lungsur kedua kini akan memaparkan pilihan Bola Keranjang dan Bola Tampar.

Pelaksanaan tanpa Menggunakan Pangkalan Data

<select name="category" onchange="changeSecondDropdown(this)"></p>
<pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

<script><br>fungsi changeSecond Dropdown(kategori) {<br> const pilihan = {</p> <pre class="brush:php;toolbar:false">&quot;1&quot;: [&quot;Smartphone&quot;, &quot;Charger&quot;], &quot;2&quot;: [&quot;Basketball&quot;, &quot;Volleyball&quot;]</pre> <p>};</p> <p>// Kosongkan pilihan dalam dropdown kedua<br> const itemsDropdown = document.getElementById("items");<br> itemsDropdown.innerHTML = "";</p> <p>// Tambah pilihan baharu berdasarkan kategori yang dipilih<br> const selectedOptions = options[category.value];<br> for (const option of selectedOptions) {</p> <pre class="brush:php;toolbar:false">const newOption = document.createElement(&quot;option&quot;); newOption.value = option; newOption.textContent = option; itemsDropdown.appendChild(newOption);</pre> <p>}<br>}<br></script>

Pelaksanaan ini menggunakan objek JavaScript untuk menyimpan pilihan bagi setiap kategori. Apabila pengguna menukar pilihan dalam lungsur turun pertama, fungsi changeSecondDropdown dipanggil, yang mengemas kini pilihan dalam lungsur kedua berdasarkan kategori yang dipilih.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Pilihan Dropdown Secara Automatik Berdasarkan Pemilihan Dropdown Pertama Tanpa Pangkalan Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn