jQueryを使用して、選択した国に基づいてカスケードドロップダウンに都市を入力するにはどうすればよいですか?

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

問題:

動的JQuery を使用して 2 つのドロップダウン (国と都市) を持つフォームを作成し、選択した国に対応する都市のみが都市ドロップダウンに表示されるようにします。

元の JavaScript コード:

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

JQuery 実装:

互換性を強化し、実装を簡素化するために、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 オプション要素が作成され、$locations.html(html) を使用して都市ドロップダウンに追加されます。

デモ:

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

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

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