Bagaimana untuk Mencipta Menu Jatuh Turun Lantas dengan Menu Kedua Pengisian Auto?

Menu Jatuh Turun Bertingkat: Mengisi Auto Menu Kedua Berdasarkan Pilihan Pertama

Dalam senario ini, kami ingin mencipta dua menu lungsur turun yang saling berkaitan, di mana pilihan dalam menu kedua berubah secara dinamik berdasarkan pemilihan yang dibuat dalam menu pertama.

Struktur HTML Awal:

<code class="html"><select name="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 name="items">
    <!-- Options will be populated dynamically -->
</select></code>

Pengendalian Acara:

Untuk mencapai kefungsian yang diingini, kami akan menggunakan pendengar acara pada menu lungsur pertama untuk mencetuskan panggilan Ajax apabila pemilihan berubah.

<code class="javascript"><script type="text/javascript">
    function changeItems(categoryId) {
        $.ajax({
            url: 'process.php?category=' + categoryId,
            success: function(data) {
                $("#items").html(data);
            }
        });
    }
</script></code>

Mengendalikan Ajax Permintaan:

Dalam fail process.php, kami akan membina pilihan untuk lungsur turun kedua berdasarkan kategori yang dipilih.

<code class="php">$categoryId = $_GET['category'];

switch ($categoryId) {
    case 1:
        $options = array(
            'Smartphone', 'Charger'
        );
        break;
    case 2:
        $options = array(
            'Basketball', 'Volleyball'
        );
        break;
    // ...
}

foreach ($options as $option) {
    echo "<option value='$option'>$option</option>";
}</code>

Mengemas kini Dropdown Kedua Secara Dinamik :

Panggilan Ajax mengisi elemen #item dengan pilihan baharu yang dijana dalam proses.php.

<code class="javascript">$("#items").html(data);</code>

Pelaksanaan Tersuai tanpa Pangkalan Data:

Jika anda tidak mempunyai pangkalan data, anda boleh mentakrifkan pilihan untuk setiap kategori secara manual dalam tatasusunan dan mengemas kini dropdown kedua melalui JavaScript.

<code class="javascript">// Define options for each category
const categories = ['First', 'Second', 'Third', 'Fourth'];
const optionArrays = [
    ['Smartphone', 'Charger'],
    ['Basketball', 'Volleyball'],
    // ...
];

// Update second dropdown on category change
$(document).on('change', 'select[name="category"]', function() {
    const selectedCategory = $(this).val();
    const options = optionArrays[selectedCategory - 1]; // Subtract 1 to match array indices

    $('#items').empty();
    for (let i = 0; i < options.length; i++) {
        $('#items').append(`<option value="${options[i]}">${options[i]}</option>`);
    }
});</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Jatuh Turun Lantas dengan Menu Kedua Pengisian Auto?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!