前言：使用JQuery封装好的js方法来实现二级三级联动要比直接使用js来实现二级三级联动要简洁很多。所以说JQuery是个非常强大的、简单易用的、兼容性好的JavaScript库，已经成为前端开发人员不可缺少的一部分，是Web开发中最流行的JavaScript库之一。
注意：使用JQuery库，必须从官方网站下载最新版本的JQuery库文件，然后导入你项目的根目录
我这里是直接下载的是Layui官方网站最新版本的layui库文件，Layui里面也有JQuery库，Layui是基于JQuery开发的...
文章目录：
- 二级联动实现
- 三级联动实现
一、JQuery二级联动的实现
还是那句话，还是老套路，先创建 HTML 两个 <select></select> 下拉列表
<select id="province" onchange="getCity()"></select>
<select id="city">
<option>请选择</option>
</select>
好了，HTML 的那个两个下拉列表已经创建出来了，接下来就是 JavaScript代码实现相应的功能了
直接上代码：
layui.use(['jquery', 'table', 'layer', 'form','upload'], function () {
// 获取 LayUI 各模块的实例对象
let $ = layui.jquery;
let table = layui.table;
let layer = layui.layer;
let form = layui.form;
let upload = layui.upload;
//创建对象字面量
var data = {
"广东省":["广州","梅州"],
"湖南省":["娄底","长沙"]
} ;
//初始化省份
var province = $("#province");
$.each(data, function(key, value) {
province.append($("<option></option>").attr("value", key).text(key));
});
//获取城市
province.change(function() {
var provinceName = $(this).val();
var city = $("#city");
city.empty();
if (data[provinceName]) {
$.each(data[provinceName], function(index, value) {
city.append($("<option></option>").text(value));
});
}
});
}) ;
append：是指定元素末尾添加内容的方法，可以接受任意数量的参数，每个参数都会被添加到目标元素的末尾，比如：$("ul").append("<li>小宝贝</li>")
alltr：获取或设置 HTLM 属性值的方法，可以传递一个参数用于获取属性值，也可以传递两个参数，用于设置属性值，比如我现在要设置一个图片img src属性值:$("img").attr("src", "newSrc.jpg")
上面就是一个使用JQuery实现的二级联动了，这里不过多唠嗑，一些概念就不写了，下面我们开始三级联动代码实现。
二、JQuery三级联动的实现
还是那句话，还是老套路，先创建 HTML 三个 <select></select> 下拉列表
<select id="province">
</select>
<select id="city">
<option>请选择</option>
</select>
<select id="district">
<option>请选择</option>
</select>
好了，下面我们直接上JavaScript代码，不过三级联动不能像二级联动那么草率了，详细讲解
1）创建JavaScript对象字面量
什么是对象字面量？其实就是一种JavaScript对象方法，它是[object literal]的一种形式；是用来创建包含键值对的对象，可以快速地创建和初始化一个对象，不再需要定义一个构造函数！
var data = {
"广东省": {
"珠海市": ["香洲区", "斗门区"],
"广州": ["番禺", "黄埔"]
},
"仙侠世界": {
"玄幻大陆": ["无敌区", "无人区"],
"科技大陆": ["天才区", "学士区"]
}
};2）初始化省份列表
// 获取省份列表
var province = $("#province");
$.each(data, function(key, value) {
var option = $("<option>").text(key);
province.append(option);
});append：是指定元素末尾添加内容的方法，可以接受任意数量的参数，每个参数都会被添加到目标元素的末尾，比如：$("ul").append("<li>小宝贝</li>")
3）根据省份获取城市列表
// 根据省份获取城市列表
function getCity() {
var city = $("#city");
var district = $("#district");
//城市为0，当选择了省份的时候才有数据
city.empty();
var selectedProvince = province.val();
$.each(data[selectedProvince], function(key, value) {
var option = $("<option>").text(key);
city.append(option);
});
}empty：清空之前的选项内容，方便更新选项内容
4）根据城市获取区县列表
function getDistrict() {
var district = $("#district");
//区县为0，当选择了城市的时候才有数据
district.empty();
//获取城市
var selectedProvince = province.val();
//获取区县
var selectedCity = $("#city").val();
//循环遍历
$.each(data[selectedProvince][selectedCity], function(key, value) {
var option = $("<option>").text(value);
district.append(option);
});
}
// 函数绑定到省份和城市下拉框的 onchange 事件上
//县列表以便在用户选择不同的省份或城市时自动更新城市和区
province.on("change", getCity);
$("#city").on("change", getDistrict);on：是JQuery一个绑定方法，用于指定元素添加一个或多个事件处理程序。
总结：
好了，以上代码就是使用JQuery库来实现的上面的二级三级联动，希望多多支持！
