javascript
JavaScript实现省市二级联动
?
?
?
JavaScript實(shí)現(xiàn)省市二級聯(lián)動(dòng)
?
展示一下效果？
?
?
?
當(dāng)我鼠標(biāo)點(diǎn)擊前面的省那一欄的時(shí)候后面市那一欄會(huì)出現(xiàn)相對應(yīng)的下轄市
實(shí)現(xiàn)思路
1.?添加相對應(yīng)的select容器
2.?然后添加數(shù)據(jù)
3.?將相應(yīng)的數(shù)據(jù)賦值給對應(yīng)的option控件
方法的講解
Function（）函數(shù) onchange();改變事件
筆者在這里寫了一個(gè)關(guān)于河南與河北的簡單聯(lián)動(dòng)
?
?
省市聯(lián)動(dòng)
?
?
<body>
?
<select id=”province”></select>省
<select id=”city”></select>市 //建立select容器
?
//建立JavaScript樣式
<script type = ”text/javascript”>
Var data = {
“河南”:[“鄭州”,“開封”，“許昌”],
“河北”:[“石家莊”,”邯鄲”,”煙臺(tái)”]
?}
//創(chuàng)建json數(shù)據(jù)源
?
?
?
?????Var Pro = document.getElementById(“province”); //創(chuàng)建省容器對象
For(var ?key in data) {
Var ProOption = document.createElemenent(“option”);//創(chuàng)建option控件
????????ProOption.innerHTML = key;//為控件賦值
Pro.appendChild(ProOption);//將控件添加到相對應(yīng)的容器中
}
??????
Var City = document.getElementById(“province”); //創(chuàng)建市容器對象 ?
Pro.οnchange=function（）{/--創(chuàng)建事件--/
Var key = this.value; //創(chuàng)建key對象
Var citArr = data[key];//創(chuàng)建城市數(shù)組
City.innerHTML = “”;//為防止重復(fù)添加每一次執(zhí)行清空容器
For(var i=0;i<citArr.length;i++){/--遍歷數(shù)組--/
Var citName = citArr[i];//取出城市名稱
Var CitOption = document.createElemenent(“option”);//創(chuàng)建城市控件
CitOption.innerHTML = citName;//為控件賦值
??City.appendChild(CitOption);//將空間添加容器
?
?
}
?
?
?
}
Pro.onchange();//為讓容器有默認(rèn)值提前調(diào)用方法一次
?
?
</body>
?
寫的不好請多指教：有疑問可留言
學(xué)習(xí)不易，請讀者多多分享。傳播知識(shí)正能量
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
</body>
轉(zhuǎn)載于:https://www.cnblogs.com/qufeiba/p/8391343.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript实现省市二级联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序------MD5加密（支持中
- 下一篇： 从零开始撸一个Fresco之内存缓存