使用jQuery 填充級聯下拉清單

在表單開發領域，級聯下拉清單經常用於提供更用戶友好和動態體驗。為了增強相容性並解決跨瀏覽器問題，jQuery 提供了一個強大的解決方案來非同步填充這些下拉清單。

問題中所示的用於建立級聯下拉清單的原始 JavaScript 函數缺乏與 IE 的兼容性。為了解決這個問題，我們可以利用 jQuery 的強大功能來簡化流程。

jQuery 解決方案：

jQuery 解決方案簡潔而優雅：

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 ''   lcn   ''
        }).join('');
        $locations.html(html)
    });
});

工作原理：

1. 我們定義一個位置對象，將國家/地區映射到其關聯的城市。
2. 我們識別國家/地區下拉清單 (#country) 和位置下拉清單 (#location)。
3. 在國家/地區下拉清單中選擇一個國家/地區時，事件處理程序將從中檢索對應的城市位置物件。
4. 城市被轉換為 HTML 選項並用於填入位置下拉清單。

此 jQuery 解決方案根據所選內容無縫地使用適當的城市填充位置下拉列表國家。它的簡單性和與各種瀏覽器的兼容性使其成為增強表單應用程式使用者體驗的理想選擇。