一个简单的三级联动

一个简单的三级联动。

<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); } } }

 

结果：