jquery实现户籍地选择下拉框
作者：WJX+WT
这篇文章主要为大家详细介绍了jquery实现户籍地选择下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用jquery实现户籍地选择下拉框的具体代码，供大家参考，具体内容如下
data.js
var data = [{
provname: '浙江省',
provId: 1,
citys: [{
cityname: "杭州市",
cityId: 101,
areas: [{
areaname: "杭州一区",
areaId: 1011
},
{
areaname: "杭州二区",
areaId: 1012
}
]
}, {
cityname: "温州市",
cityId: 102,
areas: [{
areaname: '温州一区',
areaId: 1021
}, {
areaname: '温州二区',
areaId: 1022
}]
}, {
cityname: "宁波市",
cityId: 103,
areas: [{
areaname: '宁波一区',
areaId: 1031
}, {
areaname: '宁波二区',
areaId: 1032
}]
}, {
cityname: "绍兴市",
cityId: 104,
areas: [{
areaname: '绍兴一区',
areaId: 1041
}, {
areaname: '绍兴二区',
areaId: 1042
}]
}]
}, {
provname: '山东省',
provId: 2,
citys: [{
cityname: "济南市",
cityId: 201,
areas: [{
areaname: "济南一区",
areaId: 2011
},
{
areaname: "济南二区",
areaId: 2012
}
]
}, {
cityname: "青岛市",
cityId: 202,
areas: [{
areaname: '青岛一区',
areaId: 2021
}, {
areaname: '青岛二区',
areaId: 2022
}]
}, {
cityname: "济宁市",
cityId: 203,
areas: [{
areaname: '济宁一区',
areaId: 2031
}, {
areaname: '济宁二区',
areaId: 2032
}]
}, {
cityname: "潍坊市",
cityId: 204,
areas: [{
areaname: '潍坊一区',
areaId: 2041
}, {
areaname: '潍坊二区',
areaId: 2042
}]
}]
},
{
provname: '广东省',
provId: 3,
citys: [{
cityname: "广州市",
cityId: 301,
areas: [{
areaname: "广州一区",
areaId: 3011
},
{
areaname: "广州二区",
areaId: 3012
}
]
}, {
cityname: "潮阳市",
cityId: 302,
areas: [{
areaname: '潮阳一区',
areaId: 3021
}, {
areaname: '潮阳二区',
areaId: 3022
}]
}, {
cityname: "澄海市",
cityId: 303,
areas: [{
areaname: '澄海一区',
areaId: 3031
}, {
areaname: '澄海二区',
areaId: 3032
}]
}, {
cityname: "潮州市",
cityId: 304,
areas: [{
areaname: '潮州一区',
areaId: 3041
}, {
areaname: '潮州二区',
areaId: 3042
}]
}]
},
{
provname: '甘肃省',
provId: 4,
citys: [{
cityname: "兰州市",
cityId: 401,
areas: [{
areaname: "兰州一区",
areaId: 4011
},
{
areaname: "兰州二区",
areaId: 4012
}
]
}, {
cityname: "白银市",
cityId: 402,
areas: [{
areaname: '白银一区',
areaId: 4021
}, {
areaname: '白银二区',
areaId: 4022
}]
}, {
cityname: "敦煌市",
cityId: 403,
areas: [{
areaname: '敦煌一区',
areaId: 4031
}, {
areaname: '敦煌二区',
areaId: 4032
}]
}, {
cityname: "定西市",
cityId: 404,
areas: [{
areaname: '定西一区',
areaId: 4041
}, {
areaname: '定西二区',
areaId: 4042
}]
}]
}
]
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<!-- 先添加三个下拉列表 -->
<select name="prov" id="prov">
</select>
<select name="city" id="city">
</select>
<select name="area" id="area">
</select>
<script>
var $prov=$("#prov")
var $city=$("#city")
var $area=$("#area")
$(function(){
//页面加载完成后触发
$.each(data,function(i,e){
$prov.append('<option value="'+e.provId+'">'+e.provname+'</option>') //在$obj的末尾追加子元素newObj
})
$prov.prepend('<option value="" selected>请选择</option>');
//当省名被选择时，触发以下事件
$prov.on("change",function(){
//遍历省
$.each(data,function(i,e){
if($prov.val()==e.provId){
//遍历市
$city.html('<option value="">请选择</option>');//用来清空之前选择的市
$.each(e.citys,function(i,e2){
$city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');
})
}
})
})
//当市名被选择时，触发以下事件
$city.on("change",function(){
//遍历省
$.each(data,function(i,e){
if($prov.val()==e.provId){
$.each(e.citys,function(i,e2){
if($city.val()==e2.cityId){
$area.html('<option value="">请选择</option>');
$.each(e2.areas,function(i,e3){
$area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>');
})
}
})
}
})
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。