JQ 省市区的三级联动
程序员文章站
2024-01-25 13:26:40
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ省市区联动</title>
</head>
<body>
<select name="" id="province" onchange="pro(this.value)">
<option value="0">请选择省份</option>
</select>
<select name="" id="city" onchange="cit(this.value)">
<option value="0">请选择城市</option>
</select>
<select name="" id="country">
<option value="0">请选择县区</option>
</select>
<script src="jquery-1.10.1.min.js"></script>
<script>
var data={
'湖南':{
"益阳":["益阳1","益阳2","益阳3"],
"岳阳":["岳阳1","岳阳2","岳阳3","岳阳4","岳阳5","岳阳6","岳阳7"],
"郴州":["郴州1","郴州2","郴州3"],
"湘潭":["湘潭1","湘潭2","湘潭3"]
},
'广东':{
"广州":["广州1","chaoyi","onestopweb.iteye.com"],
"珠海":["珠海1","珠海2","珠海3"],
"佛山":["佛山1"]
},
'河南':{
"郑州":["郑州1","郑州2","郑州3"],
"洛阳":["洛阳1","洛阳2","洛阳3"],
}
}
var p="";
for(var key in data){
p+='<option value="'+key+'">'+key+'</option>';
}
$('#province').append(p);
var pname="";
function pro(a) {
var c='<option value="0">请选择城市</option>';
$('#city').html("");
for(var k in data[a]){
c+='<option value="'+k+'">'+k+'</option>';
}
$('#city').append(c);
pname=a;
}
function cit(a) {
var cou='<option value="0">请选择县区</option>';
$('#country').html("");
for(var k in data[pname][a]){
cou+='<option value="'+data[pname][a][k]+'">'+data[pname][a][k]+'</option>';
}
$('#country').append(cou);
}
</script>
</body>
</html>
效果图：
