这里就拿省市区三级联动来举例,首先是HTML部分,可放三个下拉选择框:
<form>
<select id="province">
<option>-----请选择省份-----</option>
</select>
<select id="city">
<option>-----请选择城市-----</option>
</select>
<select id="area">
<option>-----请选择区-----</option>
</select>
</form>
接着是JS部分,代码如下:
var oProv = document.getElementById("province");
var oCity = document.getElementById("city");
var oArea = document.getElementById("area");
var Prov = [
{id:1,prov:"北京"},
{id:2,prov:"上海"},
{id:3,prov:"安徽省"}];
var opt = "<option>-----请选择省份-----</option>";
for( var i=0;i<Prov.length;i++ ){
opt += "<option value='"+Prov[i].id+"'>"+Prov[i].prov+"</option>";
}
oProv.innerHTML = opt;
var city = {
"1" : ["101#北京市"],
"2" : ["201#上海市"],
"3" : ["301#合肥市","302#池州市","303#滁州市"]
};
oProv.onchange = function(){
var val = this.value;
var opt1 = "<option>-----请选择城市-----</option>";
var opt2 = "<option>-----请选择区-----</option>";
for( var i=0;i<city[val].length;i++ ){
var sCity = city[val][i].split("#");
opt1 += "<option value='"+sCity[0]+"'>"+sCity[1]+"</option>";
}
oCity.innerHTML = opt1;
oArea.innerHTML = opt2;
};
var Area = {
"101" : ["朝阳区","海淀区","昌平区","房山区","怀柔区"],
"201" : ["宝山区","浦东新区","万全区","奉贤区","闵行区"],
"301" : ["蜀山区","高新区","瑶海区"],
"302" : ["贵池区","青阳县","石台县"],
"303" : ["琅琊区","定远县","南谯区"]
};
oCity.onchange = function(){
var val = this.value;
var opt = "<option>-----请选择区-----</option>";
for( var i=0;i<Area[val].length;i++ ){
opt += "<option>"+Area[val][i]+"</option>";
}
oArea.innerHTML = opt;
};