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

問題:

ダイナミックなドロップダウンを作成しようとしていますJQuery を使用して 2 つのドロップダウン (国と都市) を含むフォームを作成し、選択した国に対応する都市のみが都市に表示されるようにします。 dropdown.

元の JavaScript コード:

元の JavaScript 関数は動作しますが、Internet Explorer では互換性の問題に直面します。都市オプションのハードコードされた配列に依存して、選択した国に基づいて都市ドロップダウンが動的に設定されます。

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)
  });
});

説明:

• 国を対応する都市の配列にマップするオブジェクトの場所を定義します。
• 変更イベント ハンドラーCountry ドロップダウンの場合、City ドロップダウンの動的な人口をトリガーします。
• イベント ハンドラーは選択された国を取得し、対応する都市の配列を場所から取得します。 object.
• ループは都市の HTML オプション要素を作成し、$locations.html(html).

Demo: を使用して都市ドロップダウンに追加します。

動作デモについては、提供されている Fiddle リンクを参照してください。

この JQuery 実装は簡潔です。クロスブラウザ互換性があり、カスケード ドロップダウンの動的な追加を容易にします。