需求: (1) 根据 省、获得市、
(2) 通过市,再获得到县,
(3) 每个下拉框数据都由一个数组组成;
效果:
初始页面
加载省份
通过选择省份,获得对应的市
再通过市,获得对应的区
HMTL代码:
<body>
省份:<select id="selProvince">
<option value="-1">--请选择--</option>
</select>
城市:<select id="selCity">
<option value="-1">--请选择--</option>
</select>
</select>
区:<select id="selArea">
<option value="-1">--请选择--</option>
</select>
</body>
JS
<script type="text/javascript">
$(function(){
//初始化参数
var provinces = ['浙江','江苏','安徽'];
var citys =[['杭州','宁波','温州'],['南京','无锡','苏州'],['合肥','安庆','黄山']];
var aears =[ [['上城区','下城区','西湖区','拱墅区'],['江北区','慈溪市'],['鹿城区','乐清市']],
[['玄武区','鼓楼区'],['滨湖区','宜兴市 '],['虎丘区','姑苏区']],
[['庐阳区','长丰县'],['迎江区','桐城市'],['黄山区','休宁县']]];
// alert(provinces.length);
//add province
for (var i = 0; i <provinces.length; i++) {
$("#selProvince").append("<option value=p"+i+">"+provinces[i]+"</option>");
}
var pIndex=0;
//provinces change
$("#selProvince").change(function(){
//第一个不移除
$("#selCity").children().not(":first").remove();
//select province value=>index
pIndex=$(this).children("option:selected").index();
//city index from 0;
var city =citys[pIndex-1];
//循环
for (var i = 0; i < city.length; i++) {
$("#selCity").append("<option value=c"+i+">"+city[i]+"</option>");
}
});
//citys change
$("#selCity").change(function(){
//第一个不移除
$("#selArea").children().not(":first").remove();
//获得city的索引
var cIndex=$(this).children("option:selected").index();
//获得area
var are=aears[pIndex-1][cIndex-1];
for (var i = 0; i < are.length; i++) {
$("#selArea").append("<option value=a"+i+">"+are[i]+"</option>");
}
});
});
</script>