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

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

Salin selepas log masuk

<script><br>fungsi changeSecond Dropdown(kategori) {<br> const pilihan = {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const newOption = document.createElement(&quot;option&quot;); newOption.value = option; newOption.textContent = option; itemsDropdown.appendChild(newOption);</pre><div class="contentsignin">Salin selepas log masuk</div></div> <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!