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

JQuery を使用したカスケード ドロップダウンの設定

問題:

よりインタラクティブなユーザー エクスペリエンスを作成するには、次のことが必要です。親ドロップダウンでの選択に基づいて、ドロップダウンにオプションを動的に入力します。 JavaScript を使用してこれを実行しようとしましたが、IE で互換性の問題に直面しています。

解決策:

互換性を強化し、実装を簡素化するために、変換しましょうJavaScript コードを 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>

説明:

• 各国の可能なすべての場所を保存する場所オブジェクトを定義します。 .
• 国のドロップダウンが変更されると、change() イベント ハンドラーがトリガーされます。
• 選択した国と対応する場所の配列を location オブジェクトから取得します。
• 使用JQuery の $.map() 関数を使用して、場所を表す HTML オプションの文字列を作成します。
• 最後に、生成された HTML オプションを #location ドロップダウンに入力します。

デモ:

Fiddle でライブ デモを試してください: https://jsfiddle.net/HvXSz/.

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