欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQ 省市区的三级联动

程序员文章站 2022-07-05 23:47:06
...
<!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>

 

效果图:
JQ 省市区的三级联动
            
    
    博客分类: 境-JS 省市区三级联动JQ三级联动JQ联动省市区联动 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • JQ 省市区的三级联动
            
    
    博客分类: 境-JS 省市区三级联动JQ三级联动JQ联动省市区联动 
  • 大小: 24.4 KB