您的位置：首页 > 其它

省市县三级联动

2016-08-26 18:38 330 查看

html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<select name="province" id="prov">
<option>---请选择省</option>
</select>
<select name="cities" id="city">
<option>---请选择市</option>
</select>
<select name="country" id="country">
<option>---请选择县(区)</option>
</select>
</body>
</html>


js部分

<script>
$(function(){
var info = "";
$.ajax({
url: "province.json",
type: "get",
success: function(data){
info = data;
change(data,"provName",$("#prov"));
}
});

//给省份添加改变事件
$("#prov").change(function(){
//每次更改省，都重置市中的内容
$("#city").html("<option>---请选择市</option>");
var prov = $(this).val();  //获取选择的省
for (var i = 0; i < info.length; i++) {
if(info[i].provName==prov){
var list = info[i].city;
change(list,"cityName",$("#city"));
}
}

//给城市添加改变事件
$("#city").change(function(){
$("#country").html("<option>---请选择县(区)</option>");
var city = $(this).val();
for (var k = 0; k < list.length; k++) {
if(city==list[k].cityName){
var coun = list[k].country;
change(coun,"countryName",$("#country"));
}
}

})
});
})

//创建option标签函数
function change(arr,attr,selector){
for (var j = 0; j < arr.length; j++) {
var option = document.createElement("option");
option.innerHTML = arr[j][attr];
selector.append(option);
}
}
</script>


对应的json文件

[
{
"provName": "辽宁省",
"city": [
{
"cityName":"沈阳市",
"country":[
{"countryName":"法库县"},
{"countryName":"辽中县"},
{"countryName":"康平县"}
]
},
{
"cityName":"大连市",
"country":[
{"countryName":"瓦房店市"},
{"countryName":"金州市"},
{"countryName":"庄河市"}
]
}
]
},
{
"provName": "黑龙江省",
"city": [
{
"cityName":"哈尔滨市",
"country":[
{"countryName":"蜚克图镇"},
{"countryName":"冷县"},
{"countryName":"热县"}
]
},
{
"cityName":"大庆市",
"country":[
{"countryName":"石油市"},
{"countryName":"海市"},
{"countryName":"陆地市"}
]
}
]
}
]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航