Bagaimana untuk Mengisi Dropdown Cascading dengan JQuery dalam IE?

Mengisi Dropdown Lantas dengan JQuery

Masalah:

Untuk mencipta pengalaman pengguna yang lebih interaktif, anda mahu untuk mengisi dropdown dengan pilihan secara dinamik berdasarkan pilihan yang dibuat dalam dropdown induk. Anda telah cuba melakukan ini menggunakan JavaScript, tetapi anda menghadapi masalah keserasian dalam IE.

Penyelesaian:

Untuk meningkatkan keserasian dan memudahkan pelaksanaan, mari tukar kod JavaScript anda kepada JQuery. Begini cara anda boleh mencapai dropdown bertingkat menggunakan JQuery:

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

Penjelasan:

• Kami mentakrifkan objek lokasi untuk menyimpan semua lokasi yang mungkin bagi setiap negara .
• Apabila lungsur turun negara berubah, pengendali acara change() dicetuskan.
• Kami mendapatkan semula negara yang dipilih dan tatasusunan lokasi yang sepadan daripada objek lokasi.
• Menggunakan Fungsi $.map() JQuery, kami mencipta rentetan pilihan HTML yang mewakili lokasi.
• Akhir sekali, kami mengisi dropdown #location dengan pilihan HTML yang dijana.

Demo:

Cuba demo langsung di Fiddle: https://jsfiddle.net/HvXSz/.

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