正文

学会jQuery三级联动，轻松实现城市地区选择功能

/0 浏览量
0716

在网页开发中，实现城市地区选择功能是一个常见的需求。jQuery作为一款流行的JavaScript库，可以帮助我们轻松实现这一功能。本文将详细介绍如何使用jQuery实现三级联动，帮助你轻松实现城市地区选择功能。

一、准备工作

在开始之前，我们需要准备以下内容：

  1. HTML结构：创建一个包含城市、省份、地区选择的下拉菜单。
  2. CSS样式：为下拉菜单添加基本样式。
  3. jQuery库：确保你的项目中已经引入了jQuery库。

HTML结构示例

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

CSS样式示例

select {
  width: 100px;
  margin-right: 10px;
}

引入jQuery库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

二、编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现三级联动。

1. 初始化数据

首先，我们需要准备一个包含省份、城市、地区的数据数组。这里以中国部分省份和城市为例。

var data = {
  "北京": {
    "北京": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区", "石景山区"],
    "天津": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区"]
  },
  "上海": {
    "上海": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "宝山区", "闵行区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
  }
};

2. 渲染省份下拉菜单

function renderProvince() {
  var provinceSelect = $("#province");
  provinceSelect.empty();
  provinceSelect.append("<option value=''>请选择省份</option>");
  for (var province in data) {
    provinceSelect.append("<option value='" + province + "'>" + province + "</option>");
  }
}

renderProvince();

3. 渲染城市下拉菜单

function renderCity(province) {
  var citySelect = $("#city");
  citySelect.empty();
  citySelect.append("<option value=''>请选择城市</option>");
  var cities = data[province];
  for (var city in cities) {
    citySelect.append("<option value='" + city + "'>" + city + "</option>");
  }
}

$("#province").change(function() {
  var province = $(this).val();
  renderCity(province);
});

4. 渲染地区下拉菜单

function renderArea(province, city) {
  var areaSelect = $("#area");
  areaSelect.empty();
  areaSelect.append("<option value=''>请选择地区</option>");
  var areas = data[province][city];
  for (var area in areas) {
    areaSelect.append("<option value='" + area + "'>" + area + "</option>");
  }
}

$("#city").change(function() {
  var province = $("#province").val();
  var city = $(this).val();
  renderArea(province, city);
});

三、总结

通过以上步骤，我们成功使用jQuery实现了城市地区选择功能。在实际项目中，你可以根据需要修改数据结构和样式，以满足不同的需求。希望本文能帮助你轻松实现这一功能。

-- 展开阅读全文 --