JavaScript省市級聯(lián)下拉菜單實例
更新時間：2017年02月14日 08:30:49 作者：梵音與笙
這篇文章主要為大家詳細介紹了JavaScript省市級聯(lián)下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近學了一個關(guān)于省市級聯(lián)簡單的小例子，貼出來與大家分享一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
<option>請選擇省份</option>
</select>
<select id="selCity">
<option>請選擇城市</option>
</select>
<script>
function $(ID){
return document.getElementById(ID);
}
var cityList=new Array();
cityList['北京市']=['東城區(qū)','西城區(qū)','昌平區(qū)'];
cityList['河北省']=['保定','石家莊','定州'];
cityList['江蘇省'] = ['南京市','蘇州市','無錫市'];
cityList['浙江省'] = ['杭州市','寧波市','溫州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['?？谑?];
function changeCity(){
var province=$("selProvince").value;
var city=$("selCity");
city.options.length=0;
for (var i in cityList) {
if(i==province){
for (var j in cityList[i]) {
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
}
}
}
function allCity(){
var province=$("selProvince");
for (var i in cityList) {
province.add(new Option(i,i),null);
}
}
window.onload=allCity;
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript Promise.all 靜態(tài)方法常見問題記錄
Promise.all 是 JavaScript 中處理多個并發(fā)異步操作的強大工具,它不僅提高了程序的執(zhí)行效率,還提供了清晰的結(jié)果管理方式,本文給大家介紹JavaScript Promise.all 靜態(tài)方法常見問題記錄,感興趣的朋友一起看看吧2024-10-10
過濾空格，尤其是在一些注冊頁面比較實用，可以用js在客戶端將空格過濾掉，減輕服務(wù)器端的負擔，下面是實現(xiàn)函數(shù)2014-10-10
bootstrap彈出層有多種觸發(fā)方式，以下是我用到的bootstrap的兩種模態(tài)框方式，需要的的朋友參考下吧2017-05-05
這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
這篇文章再次為大家詳細介紹了JavaScript簡單實現(xiàn)彈出拖拽窗口的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章介紹了js實現(xiàn)收縮菜單效果實例代碼，有需要的朋友可以參考一下2013-10-10
void(0)用于執(zhí)行某些處理，但是不整體刷新頁面的情況下，下面小編就給大家詳細介紹js中 javascript:void(0)的含義 ，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進行前端開發(fā)，優(yōu)化網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
原生js實現(xiàn)表單的正則驗證（驗證通過后才可提交）
這篇文章主要給大家介紹了關(guān)于如何利用原生js實現(xiàn)表單的正則驗證，所有驗證都通過后提交按鈕才可用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要為大家詳細介紹了js仿淘寶和百度文庫的評分功能的相關(guān)代碼和實現(xiàn)思路,具有一定的參考價值，需要的朋友可以參考下2016-05-05