三级联动效果实现

这里就拿省市区三级联动来举例，首先是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;
};