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 ソリューションは、選択した国に基づいて適切な都市を場所のドロップダウンにシームレスに入力します。そのシンプルさとさまざまなブラウザーとの互換性により、フォーム アプリケーションのユーザー エクスペリエンスを向上させるための理想的な選択肢となります。