Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengisi Dropdown Lantas dengan jQuery untuk Keserasian Penyemak Imbas yang Lebih Baik?

Bagaimana untuk Mengisi Dropdown Lantas dengan jQuery untuk Keserasian Penyemak Imbas yang Lebih Baik?

Susan Sarandon
Susan Sarandonasal
2024-10-28 02:33:02429semak imbas

How to Populate Cascading Dropdowns with jQuery for Improved Browser Compatibility?

Mengisi Dropdown Lata dengan jQuery

Latar Belakang

Anda telah menghadapi cabaran apabila cuba membuat borang dengan dropdown lata dinamik menggunakan kedua-dua HTML dan JavaScript. Kod JavaScript awal anda berfungsi, tetapi isu keserasian timbul dalam Internet Explorer. Akibatnya, anda sedang berusaha untuk beralih kepada jQuery untuk keserasian yang dipertingkatkan.

Penyelesaian

Penyelesaian kepada masalah anda adalah sangat mudah:


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)
});

});

Demo

Lihat demonstrasi langsung penyelesaian ini pada [ Biola](pautan biola di sini).

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Dropdown Lantas dengan jQuery untuk Keserasian Penyemak Imbas yang Lebih Baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn