如何使用 jQuery 動態填入級聯下拉式選單？

使用jQuery 填充級聯下拉清單

問題

建立一個包含兩個下拉清單（國家和城市）的表單，您需要讓它們動態，以便僅所選國家/地區的城市可見。您已將 JavaScript 轉換為 jQuery 以獲得更好的相容性，但仍面臨一些問題。

原始JavaScript

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

jQuery 解決方案

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

工作原理工作原理此代碼將國家/地區與城市的關係儲存在位置物件中。當國家/地區下拉清單變更時，變更事件處理程序將取得所選國家/地區並從位置物件中擷取對應的城市。然後，它為城市建立 HTML 選項並替換位置下拉清單的內容。

以上是如何使用 jQuery 動態填入級聯下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！