使用 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 实现简洁，跨浏览器兼容，并且方便级联下拉列表的动态人口。