如何使用 jQuery 根据所选国家/地区填充级联下拉列表？

使用 JQuery 填充级联下拉列表

问题：

您的目标是创建一个动态的使用 JQuery 构建具有两个下拉列表（国家和城市）的表单，确保仅与所选国家对应的城市显示在城市下拉列表中。

原始 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中文网其他相关文章！