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