jqueryによる戸籍地選択ドロップダウン・ボックスの実現
37382 ワード
jqueryによる戸籍地選択ドロップダウン・ボックスの実現
data.js
demo.html
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('e.provId+'">'+e.provname+'') // $obj newObj
})
$prov.prepend('');
// ,
$prov.on("change",function(){
//
$.each(data,function(i,e){
if($prov.val()==e.provId){
//
$city.html('');//
$.each(e.citys,function(i,e2){
$city.append('e2.cityId+'">'+e2.cityname+'');
})
}
})
})
// ,
$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('');
$.each(e2.areas,function(i,e3){
$area.append('e3.areaId+'">'+e3.areaname+'');
})
}
})
}
})
})
})
</script>
</body>
</html>