Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="jquery3.min.js"></script>
<title>Document</title>
</head>
<body>
<select name="pro" id="pro">
<option value="0">
请选择
</option></select
>
<select name="" id="city">
<option value="">请选择</option>
</select>
<select name="" id="con">
<option value="">请选择</option>
</select>
</body>
</html>
JS部分///存储城市
<script>
var provice = [
{ pid: 1, pname: "湖北" },
{ pid: 2, pname: "河北" },
{ pid: 3, pname: "河南" }
];
var cities = [
{ cid: 1, cname: "武汉", pid: 1 },
{ cid: 2, cname: "郑州", pid: 3 },
{ cid: 3, cname: "石家庄", pid: 2 },
{ cid: 4, cname: "鄂州", pid: 1 },
{ cid: 5, cname: "荆州", pid: 1 },
{ cid: 6, cname: "洛阳", pid: 3 },
{ cid: 7, cname: "开封", pid: 3 },
{ cid: 8, cname: "秦皇岛", pid: 2 },
{ cid: 9, cname: "邢台", pid: 2 }
];
var country = [
{ id: 1, cname: "洪山区", cid: 1 },
{ id: 2, cname: "武昌区", cid: 1 },
{ id: 3, cname: "江汉区", cid: 1 },
{ id: 4, cname: "郑州一", cid: 2 },
{ id: 5, cname: "郑州二", cid: 2 },
{ id: 6, cname: "郑州三", cid: 2 },
{ id: 1, cname: "石一", cid: 3 },
{ id: 2, cname: "石二", cid: 3 },
{ id: 3, cname: "石三", cid: 3 },
{ id: 4, cname: "梁子湖", cid: 4 },
{ id: 5, cname: "泽林", cid: 4 },
{ id: 6, cname: "葛店", cid: 4 },
{ id: 1, cname: "荆州", cid: 5 },
{ id: 2, cname: "公安", cid: 5 },
{ id: 3, cname: "洛1", cid: 6 },
{ id: 4, cname: "洛2", cid: 6 },
{ id: 5, cname: "开1", cid: 7 },
{ id: 6, cname: "开2", cid: 7 },
{ id: 1, cname: "秦1", cid: 8 },
{ id: 2, cname: "秦2", cid: 8 },
{ id: 4, cname: "宁晋", cid: 9 },
{ id: 5, cname: "memda", cid: 9 }
];
$.each(provice, function (i, k) {
var ops = $("<option value='" + k.pid + "'>" + k.pname + "</option>");
$("#pro").append(ops);
});
//无条件将数据添加到第一个下拉列表
$("#pro").change(function () {
var pid = $(this).val();
var city = cities.filter(function (ok) {///过滤函数
if (pid == ok.pid) {
return true;
}
});
$(".city").remove(); // 先 清除 市
$(".con").remove();
// 循环追加市
$.each(city, function (index, val) {
var ops = $(
"<option class='city' value='" +
val.cid +
"'>" +
val.cname +
"</option>"
);
$("#city").append(ops);
});
});
///第三框
$("#city").change(function () {
var cid = $(this).val();
var countrys = country.filter(function (item) {
if (item.cid == cid) {
return true;
}
});
$(".con").remove();
$.each(countrys, function (k, v) {
var ops = $(
"<option class='con' value='" + v.id + "'>" + v.cname + "</option>"
);
$("#con").append(ops);
});
});
</script>
在线测试
源码下载
Jquery三级联动