一個簡單的三級聯動。

<div class="editInput">
        <select id="province"><option>選擇省</option></select>
        <select id="city"><option>選擇市</option></select>
        <select id="area"><option>選擇區</option></select>
</div>

同時引入了一個city.js的文件，這是省市列表。就是數組，也可以假裝我們請求到的數據吧。裏面的格式是這樣的：

兩個特別大的數組，哈哈哈

我就直接貼出來js文件了。

//select本地聯動
    var pro_select = document.getElementById("province");
    var city_select = document.getElementById("city");
    var area_select = document.getElementById("area");
    

    //加載省份
    for(var i in province){
        var opt = document.createElement("option");
        opt.innerText = province[i].name;
        opt.setAttribute("value", province[i].id);
        pro_select.appendChild(opt);
    }
    
    //給省份添加change事件，選擇省份，獲取城市
    pro_select.onchange = function(){
        //獲取省份ID
        var proid = pro_select.value;

        //先清除原來的城市數據
        city_select.innerHTML = "<option>選擇市</option>";
        area_select.innerHTML = "<option>選擇區</option>";

        //根據省份id獲取 城市列表(遍歷省份去匹配)
        for(var i in province){
            if(province[i].id == proid){
                var citys = province[i].city;
                //遍歷城市列表
                for(var j in citys){
                    var opt = document.createElement("option");
                    opt.innerText = citys[j].name;
                    opt.setAttribute("value", citys[j].id);
                    city_select.appendChild(opt);
                }
            }
        }
    }


    //給城市添加change事件，選擇城市，獲取區縣
    city_select.onchange = function(){
        //獲取城市ID
        var cityid = city_select.value;
        //先清除原來的城市數據
        area_select.innerHTML = "<option>選擇區</option>";
        //根據城市ID獲取區縣列表
        for(var i in area){
            if(area[i].pid == cityid){
                var opt = document.createElement("option");
                opt.innerText = area[i].name;
                opt.setAttribute("value", area[i].id);
                area_select.appendChild(opt);
            }
        }
    }
 

結果：

一個簡單的三級聯動