Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk Melaksanakan Pilihan Menukar Auto dalam Menu Dropdown Kedua Berdasarkan Pemilihan Dropdown Pertama?

Bagaimana untuk Melaksanakan Pilihan Menukar Auto dalam Menu Dropdown Kedua Berdasarkan Pemilihan Dropdown Pertama?

DDDasal: 2024-10-21 06:45:02856semak imbas

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

Autoubah Pilihan dalam Menu Jatuh Turun Kedua Berdasarkan Pilihan Jatuh Turun Pertama

Apabila mencipta berbilang menu lungsur turun di mana pilihan dalam yang kedua menu bergantung pada pemilihan yang dibuat dalam menu pertama, adalah mungkin untuk mencapainya tanpa bergantung pada pangkalan data.

Persediaan Awal

Menu lungsur turun pertama akan paparkan senarai kategori, manakala lungsur turun kedua akan memaparkan item yang dikaitkan dengan kategori yang dipilih.

Tinggal Turun Pertama:

<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>

Turun Turun Kedua:

<select name="items"><br></select><br>

Pilihan Dinamik dalam Dropdown Kedua

Untuk mengemas kini pilihan dalam menu lungsur kedua berdasarkan pemilihan dalam menu lungsur pertama, kami memerlukan fungsi AJAX yang menghantar kategori yang dipilih kepada skrip PHP.

Fungsi AJAX:

<script type="text/javascript"></p>
<pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}

Fungsi ini dilampirkan pada peristiwa perubahan pada lungsur turun pertama.

Dalam HTML, letakkan elemen pilihan lain dengan id "sub" untuk memaparkan pilihan yang dijana secara dinamik.

<select onchange="ajaxfunction(this.value)"></p>
<pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->