快捷導(dǎo)航

JavaScript省市級聯(lián)下拉菜單實例

更新時間：2017年02月14日 08:30:49 作者：梵音與笙

這篇文章主要為大家詳細(xì)介紹了JavaScript省市級聯(lián)下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近學(xué)了一個關(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中的事件循環(huán)機(jī)制及其運行原理
JavaScript中的事件循環(huán)機(jī)制是一種異步處理機(jī)制，通過維護(hù)事件隊列和消息隊列，實現(xiàn)任務(wù)的分發(fā)和執(zhí)行。事件循環(huán)機(jī)制由主線程和任務(wù)隊列構(gòu)成，主線程運行完當(dāng)前任務(wù)后會檢查任務(wù)隊列中是否有待執(zhí)行的任務(wù)，如有則執(zhí)行，否則等待
2023-04-04
解決layui的table.checkStatus失效問題
這篇文章主要介紹了解決layui的table.checkStatus失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
js保留小數(shù)點后幾位的寫法
本篇文章主要是對js保留小數(shù)點后幾位的寫法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
在Webpack中用url-loader處理圖片和字體的問題
這篇文章主要介紹了在Webpack中用url-loader處理圖片和字體的問題及解決方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
基于js實現(xiàn)checkbox批量選中操作
這篇文章主要為大家詳細(xì)介紹了基于js實現(xiàn)checkbox批量選中操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
JavaScript交換兩個變量值的七種解決方案
最近在寫位操作的時候突然想到了這個問題，突然想總結(jié)一下，交換變量值的問題可能使我們學(xué)習(xí)編程語言接觸到的比較早的邏輯問題，小伙伴或多或少會兩種解決的方法，本文提供了七種解決的方法，下面跟著小編來一起看看吧。
2016-12-12
JS用或 || 來兼容FireFox!
JS用或 || 來兼容FireFox!...
2006-11-11
JS+css 圖片自動縮放自適應(yīng)大小
編輯器上傳的圖片太大了，把FF和IE撐的走形，所以希望圖片在某些頁面里要有固定大小，如果需要某個范圍，用getElementByname來設(shè)定，也是一個道理：
2013-08-08
js的es6常用新特性詳解
ES6（ECMAScript 6,也稱為ES2015）是JavaScript的一個重要更新版本,引入了許多新的語言特性和改進(jìn),使得JavaScript變得更加現(xiàn)代化、易讀、易維護(hù)和更適合大型應(yīng)用程序的開發(fā),ES6的主要變化歸納為：語法糖、新機(jī)制、更好的語義、更多的內(nèi)置對象和方法
2023-11-11
element-ui 通過按鈕式觸發(fā)日期選擇器
ElementUI是Vue.js的一套組件庫,其日期時間選擇器默認(rèn)是通過點擊輸入框來觸發(fā),本文介紹了如何自定義觸發(fā)日期選擇器,同時隱藏輸入框,通過編寫一個自定義組件CustomDatePicker.vue,可以實現(xiàn)點擊按鈕來觸發(fā)日期選擇器
2024-10-10