JQuerys实现三级省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () { //入口函数
//获得城市对象的下拉框
var $city = $("#city");
var $xian = $("#xian");
var provinces = ["河南省","安徽省"];
var cities = [
["河南市1", "河南市2"],
["安徽市1", "安徽市2"]
];
var xians = [ //三维数组
[["河南县1", "河南县11", "河南县111"], ["河南县2", "河南县22", "河南县222"], ["无", "无"]],
[["安徽县1", "安徽县11", "安徽县111"], ["安徽县2", "安徽县22", "安徽县222"]]
];
//遍历显示出省份
$.each(provinces, function (i, n) {
$("#province").append("<option name='city'>" + n + "</option>");
});
//如果省改变
$("#province").change(function () {
$city.get(0).length = 1;
$xian.get(0).length = 1;
//清空城市列表按钮 , 只保留第一个 <option value="0" name="city">请选择</option>
//清空县列表按钮 , 只保留第一个 <option value="0" name="city">请选择</option>
var a = $("#province option:selected").index() - 1;
$.each(cities, function (i, n) { //n是城市的cites数组的一个
if (a == i) { //如果省的value值等于citys数组的索引, 就遍历这个城市数组中的这个
$(n).each(function (j, m) {
//创建对象，并且添加到城市下拉框中
$city.append("<option name='city'>" + m + "</option>");
});
}
});
});
//如果市改变
$("#city").change(function () {
var c = $("#city option:selected").index() - 1; //获得市的索引
var p = $("#province option:selected").index() - 1; //获得省的索引
$xian.get(0).length = 1;
//清空城市按钮 , 只保留第一个 <option value="0" name="city">请选择</option>
$.each(xians, function (i, n) {
//先通过省的索引遍历县的三维数组获的二维数组
if (p == i) { //如果省的索引等于县的二维数组索引,
//n就是那个三维数组中的二维数组
$(n).each(function (j, m) { //在遍历这个二维数组
if (c == j) { //下面遍历一维数组
$(m).each(function (x, p) {
//创建对象，并且添加到城市下拉框中
$xian.append("<option name='city'>" + p + "</option>");
});
}
});
}
});
});
});
</script>
</head>
<body>
省份：<select id="province">
<option value="0" name="city">请选择</option>
</select>
城市：<select id="city">
<option value="0" name="city">请选择</option>
</select>
县：<select id="xian">
<option value="0" name="city">请选择</option>
</select>
</body>
</html>
//自己导入一个JS库复制代码就能直接运行
分析 :
//省和市都有对应的索引, 遍历三维数组时根据 [ 省索引 ] [ 市索引 ]找到对应三维数据里面对应的数据
//所以你自己自定义数据的时候 , 省市县的索引也要一一对应!
