原生js实现省市县三级联动

思路

• 首先设置数据创造三个数组，分别存放省市县的元素民称。省级为一维数组，市为二维数组，县为三维数组。
• 主要流程：
  1. 初始化省级菜单，把省级数组里面的元素追加到select的选项框中。
  2. 当省级菜单里面元素被点击后，初始化市级菜单，追加到对应的选项框中，区级菜单同理。
  3. 当省级菜单没有选项是，由于省级的selectedIndex元素的值为0，所以借此来锁定后面两级菜单，当上一级的selectedIndex为0是。不追加元素。
  4. 由于采用的是追加元素的方式，所以在每次点击时，需要把下一级菜单清零（否则会越点击越多）。

代码

var provinces = ["河北省","吉林省"];
var cities = [
    ["石家庄市","廊坊市"],
    ["长春市","吉林市"]
];
var areas = [
    [
        ["市中区", "历下区", "天桥区", "槐荫区", "历城区", "长清区"],
        ["市南区", "市北区", "四方区", "李沧区", "城阳区", "崂山区"]
    ],
    [
        ["桥西区", "新华区", "长安区", "裕华区", "井陉区", "藁城区", "鹿泉区", "栾城区"],
        ["安次区", "广阳区", "三河市", "霸州市", "香河县", "永清县", "固安县", "文安县"]
    ]
];
//初始化变量
var province,city,area;
//初始化的代码
function initProvince() {
//接收页面的元素
    province = document.getElementById("province");
    city = document.getElementById("city");
    area = document.getElementById("area");
    //清零操作
    province.options.length = 1;
    for (var i = 0; i <provinces.length ; i++) {
        var option = new Option(provinces[i],provinces[i]);
        province.options.add(option);
    }
}
//当省级的选项被点击
function provinceChange() {
初始化区级
    cityChange();
    city.options.length = 1;
    //当上一级没有被选择时候，直接返回，不追加元素。
    if (province.selectedIndex === 0) {
        return;
    }
    //由于数组是从0开始，元素的选择数从1开始，所以减1
    var pIndex = province.selectedIndex;
    for (var i = 0; i <cities[pIndex-1].length ; i++) {
        var option = new Option(cities[pIndex-1][i],cities[pIndex-1][i]);
        city.options.add(option);
    }
}
//当省级被点击时候解锁地区的代码
function cityChange() {
    area.options.length = 1;
    if (city.selectedIndex === 0){
        return;
    }
    var pIndex = province.selectedIndex;
    var aIndex = city.selectedIndex;
    for (var i = 0; i < areas[pIndex-1][aIndex-1].length ; i++) {
        areasm = areas[pIndex-1][aIndex-1][i];
        var option = new Option(areasm,areasm);
        area.options.add(option);
    }
}
window.onload = function () {
    initProvince();
    province.onchange = provinceChange;
    city.onchange = cityChange;
};