使用JQuery 填充級聯下拉清單

問題：

您的目標是建立一個動態使用JQuery建立具有兩個下拉清單（國家/地區和城市）的表單，確保僅與所選國家/地區對應的城市顯示在城市中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)
  });
});

解釋：

• 我們定義一個物件位置，將國家/地區對應到對應城市的陣列。
• 更改事件處理程序國家/地區下拉清單觸發城市下拉清單的動態人口。
• 事件處理程序取得所選國家/地區並從位置擷取對應的城市陣列object.
• 循環為城市建立HTML 選項元素，並使用$locations.html(html) 將它們附加到City 下拉清單。

Demo:

您可以參考提供的 Fiddle 連結來取得工作簡報。

這個 JQuery 實作簡潔，跨瀏覽器相容，並且方便級聯下拉清單的動態人口。