Bagaimana untuk Mengisi Dropdown Cascading Secara Dinamik dengan jQuery?

Isi Lata Turun dengan jQuery

Masalah

Membuat borang dengan dua lungsur turun (Negara dan Bandar), anda perlu menjadikannya dinamik supaya hanya bandar negara yang dipilih kelihatan. Anda telah menukar JavaScript anda kepada jQuery untuk keserasian yang lebih baik, tetapi anda masih menghadapi beberapa isu.

JavaScript Asal

<code class="javascript">function populate(s1, s2) {
    var optionArray;
    switch (s1.value) {
        case "Germany":
            optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
            break;
        // ... more cases
        default:
            optionArray = ["|"];
    }

    for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}</code>

Penyelesaian jQuery

Kod jQuery berikut mencapai hasil yang diingini:

<code class="javascript">jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return `<option value="${lcn}">${lcn}</option>`
        }).join('');
        $locations.html(html)
    });
});</code>

Cara Ia Berfungsi

Kod ini menyimpan perhubungan negara-bandar dalam objek lokasi. Apabila lungsur turun negara ditukar, pengendali acara perubahan mendapatkan negara yang dipilih dan mendapatkan semula bandar yang sepadan daripada objek lokasi. Ia kemudian membina pilihan HTML untuk bandar dan menggantikan kandungan lungsur turun lokasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Dropdown Cascading Secara Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!