1. 程式人生 > >省級三聯動

省級三聯動

nbsp OS func tel DC this document cit span

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

省級三聯動