<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16</title>
<style>
select {
border: 1px solid #c9c9c9;
background-color: #fff;
color: #666;
height: 28px;
line-height: 28px;
padding: 4px 6px;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<label for="one">省</label>
<select id="one">
<!--<option value="">请选择省份</option>-->
</select>
<label for="two">市</label>
<select id="two">
<!--<option value="">请选择城市</option>-->
</select>
<label for="three">区</label>
<select id="three">
<!--<option value="">请选择区域</option>-->
</select>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
var province = [
{
"name": "广东省",
"city": [
{
"name": "广州市",
"area": ["越秀区", "荔湾区", "海珠区", "天河区"]
},
{
"name": "深圳市",
"area": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区"]
}
]
},
{
"name": "河南省",
"city": [
{
"name": "郑州市",
"area": ["中原区", "二七区", "管城回族区", "金水区"]
},
{
"name": "洛阳市",
"area": ["西工区", "老城区", "瀍河回族区", "涧西区"]
}
]
},
{
"name": "江西省",
"city": [
{
"name": "南昌市",
"area": ["东湖区", "西湖区", "青云谱区", "湾里区"]
},
{
"name": "九江市",
"area": ["浔阳区", "庐山区", "瑞昌市", "九江县"]
}
]
},
];
$("#two").change(function () {
var one_index = $("#one option:selected").index();
var two_index = $("#two option:selected").index();
var three = $("#three");
three.empty();
// three.empty().append("<option>请选择区域</option>");
if (two_index > 0) {
var area = province[one_index].city[two_index].area;
for (var index = 0; index < area.length; index++) {
three.append("<option>" + area[index] + "</option>");
}
}
});
$("#one").change(function () {
var one_index = $("#one option:selected").index();
var two = $("#two");
var three = $("#three");
two.empty();
three.empty();
// two.empty().append("<option>请选择城市</option>");
// $("#three").empty().append("<option>请选择区域</option>");
if (one_index >= 0) {
var city = province[one_index].city;
for (var index = 0; index < city.length; index++) {
two.append("<option>" + city[index].name + "</option>");
}
for (var i = 0; i < city[0].area.length; i++) {
three.append("<option>" + city[0].area[i] + "</option>");
}
}
});
init();
function init() {
for (var index = 0; index < province.length; index++) {
$("#one").append("<option>" + province[index].name + "</option>");
}
for (var i = 0; i < province[0].city.length; i++) {
$("#two").append("<option>" + province[0].city[i].name + "</option>");
}
for (var j = 0; j < province[0].city[0].area.length; j++) {
$("#three").append("<option>" + province[0].city[0].area[j] + "</option>");
}
}
})
</script>
</body>
</html>