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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。