1 引包： area.js
html
--------------------
<span> 所在省份 </span>
<!-- <input type="text" class="layui-input"> (必选) -->
<div class="layui-input-block city" style="color:#666" >
<select name="cmbProvince" id="sel" class="left layui-input" style="width: 21%;color:#666"></select>
<select name="cmbCity" id="city" class="left layui-input" style="width: 21%;color:#666;margin: 0 5%";></select>
<select name="cmbArea" id="area_" class="left layui-input" style="width: 21%;color:#666"></select>
</div>
js
------------------
//省市区三级联动
var sel=document.getElementById(‘sel‘);
var city=document.getElementById(‘city‘);
var area_=document.getElementById(‘area_‘);
for(i in area){
var node=document.createElement("option");
node.innerHTML=i;
sel.appendChild(node);
}
var sel_value=sel.value;
for(i in area[sel_value][0]){
var node=document.createElement("option");
node.innerHTML=i;
city.appendChild(node);
}
var city_value=city.value
for(var i=0;i<area[sel_value][0][city_value].length;i++){
for(j in area[sel_value][0][city_value][i]){
var node=document.createElement("option");
node.innerHTML=j;
area_.appendChild(node);
}
}
sel.onchange=function(){
sel_value=this.value;
city.innerHTML="";
area_.innerHTML="";
for(i in area[sel_value][0]){
var node=document.createElement("option");
node.innerHTML=i;
city.appendChild(node);
}
city_value=city.value;
for(var i=0;i<area[sel_value][0][city_value].length;i++){
for(j in area[sel_value][0][city_value][i]){
var node=document.createElement("option");
node.innerHTML=j;
area_.appendChild(node);
}
}
}
city.onchange=function(){
area_.innerHTML="";
city_value=city.value;
for(var i=0;i<area[sel_value][0][city_value].length;i++){
for(j in area[sel_value][0][city_value][i]){
var node=document.createElement("option");
node.innerHTML=j;
area_.appendChild(node);
}
}
}