省级三联动

1 引包： area.js

html

--------------------

<span> 所在省份 </span>

<!-- <input type="text" class="layui-input"> &nbsp;&nbsp;&nbsp;(必选) -->

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

}

}

}