<!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省市区三级联动，简单实用 不需要查询数据库
是一个jquery省市区三级联动，支持默认设置省、市、区，数据很全，调用简单，浏览器兼容很好，需要的下载试试吧
JQ省市区三级联动选择插件
jQuery省市区三级联动
一款非常强大的jQuery省市区城市三级联动插件，内附详细使用说明。
全国省市区三级联动(PHP+jQuery附数据库) 目录 Javascript: 1 PHP: 2 Html 3 Sql: 3
php+mysql+jquery省市区三级联动附带数据库
用jQuery自己封装了一个比较完整的三级联动，带有提示文本，自定义选中省市区，自定义提示文本内容等。city数据更新日期为2022年2月
移动端省市区三级联动，非select，固定底部，滑动选择省市区，在手机上效果就是点击区域，底部出现省市区选择，并排显示，滑动选择
HTML5，这是一款非常实用美观的省市区三级联动城市选择器插件，移动端jQuery省市县城市三级联动下拉菜单选择插件代码。也可以修改为：省市区三级联动、省市二级联动或单选省。
jQuery移动端省市区三级联动,可以很好的选择城市联动效果，数据包是可以直接使用就好样式都有的
插件描述：Select2实现全国省市区三级联动下拉菜单. 参考示例：http://www.jq22.com/jquery-info6009
这是一款基于百度地图jQuery实现的，可以实现省市区三级联动地图分区代码。
通过city-picker.js插件制作的一个jQuery省市区三级联动插件
jQuery省市区三级联动菜单基于jquery-1.7.2.min.js、city.min.js、jquery.cityselect.js、JSON制作的省市区联动效果，多级联动菜单。多种联动效果，支持自定义下拉选项内容。
jq模拟下拉的省市区三级联动插件，完美兼容在ie下显示select的不友好ui，数据完整可直接使用
适用于电商项目收货地址选择的三级联动插件，省市县数据很齐全。
JQ地区插件省市区三级联动,下拉地区选择器!自己珍藏的东西!拿出来给大家分享一下!
jquery 实现的省市区的三级联动的方法 jquery bootstrap 省市区 三级联动