JQ 实现三级联动
2019-07-22 本文已影响0人
南极小丑
注：本代码演示的为下载后的jquery文件，需要自己更换JQ的引入方式
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../JQ/jquery3.min.js"></script>
</head>
<body>
<form action="">
<select name="pro" id="pro">
<option value="">请选择省份</option>
</select>
<select name="" id="city">
<option value="">请选择城市</option>
</select>
<select name="" id="con">
<option value="">请选择县城</option>
</select>
</form>
</body>
</html >
JQ部分
<script>
//省份信息
var province = [{pid:1,pname:"湖北省"},
{pid:2,pname:"河北省"},
{pid:3,pname:"河南省"}
]
//市区信息
var citys = [{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(province,function(index,val){
//创建 option
var ops = $("<option value="+val.pid+">"+val.pname+"</option>")
//添加省份
$("#pro").append(ops)
});
//市区
//选择省份
$("#pro").change(function(){
//往市select 追加option
var pid = $(this).val();//获取点击的对象（值）
// 将数组过滤
var city = citys.filter(function(obj){
if(pid == obj.pid){
return true
}
});
$('.city').remove(); //先清除市
$(".con").remove() //先删除市
//初始化市，将市添加到第二个下拉列表
$.each(city,function(index,val){
//创建 option
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(cid ==item.cid ){
return true;
}
});
$(".con").remove() //先删除市
//初始化城，将城添加到第三个下拉列表
$.each(countrys,function(index,x){
//创建option
var ops = $("<option class='con ' value="+x.cid+">"+x.cname+"</option>")
//添加市
$("#con").append(ops)
})
})
</script>
