省级三联动

it2022-05-09  23

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.οnchange=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.οnchange=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); } } }

转载于:https://www.cnblogs.com/dyjiang/p/8710903.html


最新回复(0)