jQuery实现的省市联动菜单功能示例【测试可用】

我来为你讲解一下如何实现“jQuery实现的省市联动菜单功能示例【测试可用】”：

一、介绍

这是一篇介绍如何使用 jQuery 实现省市联动菜单的文章。我们通过两个下拉菜单（省、市）实现了联动选择，当选择省份时，市级下拉菜单会根据选中的省份自动更新，只显示该省份对应的市级选项。

二、HTML 结构

使用 jQuery 实现省市联动菜单首先需要构建好 HTML 的结构。下面是一个简单的 HTML 结构示例：

<!--省份下拉菜单-->
<label for="province">省份:</label>
<select id="province">
  <option value="">请选择</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
  <option value="4">湖南</option>
</select>

<!--城市下拉菜单-->
<label for="city">城市:</label>
<select id="city" disabled>
  <option value="">请选择</option>
</select>

我们使用 <label> 标签为省份和城市下拉菜单添加标签，使得用户更好的理解下拉菜单的用途。对于省份和城市的选择，我们使用 <select> 标签，通过 <option> 标签设置选项的值和显示文本。此外，我们还通过添加 disabled 属性使城市下拉菜单默认不可用，用户必须选择省份后才能使用城市下拉菜单。

三、jQuery 实现

下面是实现省市联动菜单的 jQuery 代码示例：

$(function(){
  // 省市信息数组
  var provinces = [
    {name:"北京", cities:["北京市"]},
    {name:"上海", cities:["上海市"]},
    {name:"广东", cities:["广州市","深圳市","东莞市","佛山市","珠海市"]},
    {name:"湖南", cities:["长沙市","株洲市","衡阳市","邵阳市","岳阳市"]}
  ];

  // 当省份选项发生改变时
  $("#province").change(function(){
    // 获取当前选中的省份
    var current_province = $(this).children("option:selected").text();
    // 根据当前选中的省份获取该省份对应的城市数组
    var current_cities = [];
    $.each(provinces,function(index,value){
      if(value.name === current_province){
        current_cities = value.cities;
        return false;
      }
    });
    // 清空城市下拉菜单，并添加当前省份对应的城市选项
    var $city = $("#city");
    $city.children().not(":first").remove();
    $.each(current_cities,function(index,value){
        $city.append("<option value='"+value+"'>"+value+"</option>");
    });
    // 恢复城市下拉菜单的可用状态
    $city.prop("disabled",false);
  });
});

我们使用了 $(function(){}) 将整个 jQuery 代码封装在一个自执行函数中，以确保代码在页面加载完成后运行。

首先，我们声明了一个数组 provinces 存储了所有省份和对应的城市数据。然后，通过 $("#province").change() 监听省份下拉菜单的改变事件。当省份选项发生改变时，我们获取当前选中的省份，再根据当前选中的省份获取该省份对应的城市数组，根据城市数组清空城市下拉菜单，并添加当前省份对应的城市选项。最后，恢复城市下拉菜单的可用状态。

四、示例说明

示例一：添加新的省份和城市

如果需要添加新的省份和城市，只需要在 provinces 数组中添加相应的数据即可，如下所示：

var provinces = [
  {name:"北京", cities:["北京市"]},
  {name:"上海", cities:["上海市"]},
  {name:"广东", cities:["广州市","深圳市","东莞市","佛山市","珠海市"]},
  {name:"湖南", cities:["长沙市","株洲市","衡阳市","邵阳市","岳阳市"]},
  {name:"新疆", cities:["乌鲁木齐市","克拉玛依市","伊犁哈萨克自治州","巴音郭楞蒙古自治州","阿勒泰地区"]}
];

这样，所有的省份和城市数据就可以更新了。如果要在页面上显示新增的省份和城市，在省份下拉菜单中添加新的选项即可。

示例二：使用 Remote 数据

通过 AJAX 获取省市数据后生成联动菜单也是一个常见的需求。如果数据比较大，写到 js 里会臃肿，不易更新及维护。
我们可以使用了 select2 的 Ajax 功能来实现。

<select data-placeholder="Choose a Country..." class="select2-ajax-select"
        data-ajax-url="./data/countries-three-children.php"
        data-root="countries" data-post-keyword="name" data-post-id="id"
        data-loading="Loading..."
        >
</select>

具体实现可以参考 select2 官网教程，需要服务器提供 json 格式的数据。