如何使用 jQuery 根據所選國家/地區填入級聯下拉清單？

使用JQuery 填充級聯下拉清單

問題：

問題：

您的目標是建立一個動態的使用JQuery 建立具有兩個下拉清單（國家和城市）的表單，確保僅與所選國家對應的城市顯示在城市下拉清單中。

原始 JavaScript 程式碼：

原始 JavaScript 函數在執行時面臨 Internet Explorer 中的相容性問題。它根據所選國家/地區動態填充城市下拉列表，依賴城市選項的硬編碼數組。

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>

為了增強相容性並簡化實現，JQuery可以就業。這是使用JQuery 的有效方法：

• 說明：
• 我們定義一個物件位置，將國家/地區對應到對應城市的陣列。
• 國家/地區下拉清單的變更事件處理程序會觸發城市下拉清單的動態人口。

事件處理程序取得選定的國家/地區並從位置物件擷取對應的城市陣列。

循環為城市建立 HTML 選項元素，並使用 $locations.html(html) 將它們附加到城市下拉清單中。

示範：

您可以請參閱提供的 Fiddle 連結以取得工作簡報。 此 JQuery 實作簡潔、跨瀏覽器相容，並有助於級聯下拉清單的動態填充。

以上是如何使用 jQuery 根據所選國家/地區填入級聯下拉清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！