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

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}

Salin selepas log masuk

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->

Salin selepas log masuk