省份城市的三级联动
1.先来三个下拉菜单
用这三个下拉菜单来显示省份、城市和区域.
代码如下:
<form>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city">
</select>
<select id="country">
</select>
</form>
第二行代码是为省份设置一个默认的值 请选择
的value属性是表示地区对应的数组下标,因为数组下标从0开是
所以把value设置成" -1 ",避免被识别成某个地区.
2.再来三个数组
这三个数组分别用来保存省份、城市和区域的信息.
代码如下:
// 省份信息数组
var provinceArr = ['上海市', '江苏省', '浙江省'];
// 城市信息数组
var cityArr = [
['上海市'],
['苏州市', '南京市', '扬州市'],
['石家庄', '秦皇岛', '张家口']
];
// 区域信息数组
var countryArr = [
[
['黄浦区', '静安区', '长宁区', '浦东区']
],
[
['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
['邗江区', '广陵区', '江都区']
],
[
['长安区', '桥西区', '新华区', '井陉矿区'],
['海港区', '山海关区', '北戴河区', '抚宁区'],
['桥东区', '桥西区', '宣化区', '下花园区']
]
];
第二行代码用数组provinceArr来保存省份信息
第四行代码用二维数组cityArr来保存城市信息
江苏的下标是"1",则 cityArr[1]中保存的就是"江苏"的所有城市.
第十行代码用三维数组countryArr来保存区域信息
扬州的下标是"2",则countryArr[1][2]中保存的就是"江苏省扬州市"的所有区域