二级联动：
html代码：
<body>
<select id="province" onchange="getCity(this.options.selectedIndex)">
<option>请选择</option>
<option>广东</option>
<option>广西</option>
</select>省
<select id="city">
<option>请选择</option>
</select>市
</body>
js代码：
var citys=[
["广州","佛山","深圳"],
["柳州","桂林"]
];
function getCity(index){
var city=document.getElementById('city');
var showCity=citys[index-1];
city.length=1;
for(var i=0;i<showCity.length;i++){
city.options[i+1]=new Option(showCity[i]);
}
}
三级联动：
html代码：
<body>
<select id="province" onchange="getCity()">
<option>请选择</option>
<option>广东</option>
<option>广西</option>
</select>省
<select id="city" onchange="getArea()">
<option>请选择</option>
</select>市
<select id="area">
<option>请选择</option>
</select>区
</body>
js代码：
var city = [
["广州", "朝阳", "潮州", "汕头"],
["柳州", "桂林"]
];
var areaa = [
[
["花都", "越秀", "荔湾", "天河", "海珠", "增城", "从化"],
["双塔", "龙城"],
["湘桥", "潮安"],
["龙湖", "濠江", "朝南", "澄海"]
],
[
["柳江", "柳南", "柳北"],
["叠彩", "秀峰", "七星", "雁山", "临桂"]
]
]; function getCity() {
var prov = document.getElementById("province");
var ci = document.getElementById("city");
var ar = document.getElementById('area');
var provinceCity = city[prov.selectedIndex - 1];
ci.length = 1; //为了处理数组切换时数据错乱
if(prov.selectedIndex != 0) {
for(var i = 0; i < provinceCity.length; i++) {
ci[i + 1] = new Option(provinceCity[i]);
//以下写法也可以
//ci.options[i+1]=new Option(provinceCity[i]);
}
}
ar.length = 1;
} function getArea() {
var prov = document.getElementById("province");
var ar = document.getElementById('area');
var ci = document.getElementById("city");
var provinceCityArea = areaa[prov.selectedIndex - 1][ci.selectedIndex - 1];
ar.length = 1; //为了处理数组切换时数据错乱
if(ci.selectedIndex != 0) {
for(var i = 0; i < provinceCityArea.length; i++) {
ar[i + 1] = new Option(provinceCityArea[i]);
}
} }