jQuery を使用してカスケード ドロップダウンを動的に設定するにはどうすればよいですか?

jQuery を使用してカスケード ドロップダウンを設定する

問題

2 つのドロップダウン (国と都市) を含むフォームを作成する場合、ドロップダウンを動的にする必要があります。選択した国の都市のみが表示されます。互換性を高めるために 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>

仕組み

このコードは、国と都市の関係を location オブジェクトに保存します。国のドロップダウンが変更されると、変更イベント ハンドラーは選択された国を取得し、対応する都市を場所オブジェクトから取得します。次に、都市の HTML オプションを構築し、場所のドロップダウンの内容を置き換えます。

以上がjQuery を使用してカスケード ドロップダウンを動的に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。