快捷導(dǎo)航

JavaScript實現(xiàn)省份城市的三級聯(lián)動

更新時間：2020年02月11日 10:06:09 作者：da_yu_hai_tang

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省份城市的三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)省份城市的三級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 select{
  width: 80px;
  margin: 5px;
 }
 </style>
 <script>
 // 省份數(shù)組
 var provinceArr = ['上海', '江蘇', '河北'];
   // 城市數(shù)組
   var cityArr = [
   ['上海市'],
  ['蘇州市', '南京市', '揚州市'],
  ['石家莊', '秦皇島', '張家口']
 ];
   // 區(qū)域數(shù)組
   var countryArr = [
   [
    ['黃浦區(qū)', '靜安區(qū)', '長寧區(qū)', '浦東區(qū)']
   ],
   [
    ['虎丘區(qū)', '吳中區(qū)', '相城區(qū)', '姑蘇區(qū)', '吳江區(qū)'],
    ['玄武區(qū)', '秦淮區(qū)', '建鄴區(qū)', '鼓樓區(qū)', '浦口區(qū)'],
    ['邗江區(qū)', '廣陵區(qū)', '江都區(qū)']
   ],
   [
    ['長安區(qū)', '橋西區(qū)', '新華區(qū)', '井陘礦區(qū)'],
     ['海港區(qū)', '山海關(guān)區(qū)', '北戴河區(qū)', '撫寧區(qū)'],
     ['橋東區(qū)', '橋西區(qū)', '宣化區(qū)', '下花園區(qū)']
    ]
   ];
   window.onload = function(){
   var province = document.getElementById('province');
   var city = document.getElementById('city');
   var country = document.getElementById('country');
   createOption(province, provinceArr);
   province.onchange = function(){
    city.length = 0;
    createOption(city, cityArr[this.selectedIndex]);
    city.onchange();
   }
   city.onchange = function(){
    country.length = 0;
    createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);
   }
   province.onchange();
   }
   function createOption(obj, data){
   for (var i = 0; i < data.length; i++) {
    var newOption = new Option(data[i], data[i]);
    obj.add(newOption, null);
   }
   }
 </script>
</head>
<body>
 省份<select name="" id="province"></select>
 城市<select name="" id="city"></select>
 區(qū)域<select name="" id="country"></select>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序開發(fā)實現(xiàn)消息推送
這篇文章主要為大家詳細介紹了微信小程序開發(fā)實現(xiàn)消息推送，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明超詳細介紹
這篇文章主要介紹了JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-11-11
JavaScript獲取一個范圍內(nèi)日期的方法
這篇文章主要介紹了JavaScript獲取一個范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下
2015-04-04
JavaScript編碼小技巧分享
這篇文章適合任何一位基于JavaScript開發(fā)的開發(fā)者。我寫這篇文章主要涉及JavaScript中一些簡寫的代碼，幫助大家更好理解一些JavaScript的基礎(chǔ)。希望這些代碼能從不同的角度幫助你更好的理解JavaScript。
2020-09-09
Javascript 判斷Flash是否加載完成的代碼
網(wǎng)站加入flash廣告代碼，利用DIV層來控制進度的狀態(tài)，如果加載swf文件到100%的時候就顯示出flash，把AD層隱藏掉，請看下面實現(xiàn)方法。
2010-04-04
js實現(xiàn)帶按鈕的上下滾動效果
這篇文章主要介紹了js實現(xiàn)帶按鈕的上下滾動效果,設(shè)計javascript鼠標(biāo)事件及頁面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
JavaScript中關(guān)于數(shù)組的調(diào)用方式
這篇文章主要介紹了JavaScript中關(guān)于數(shù)組的調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別，文章內(nèi)容介紹詳細，具有一的的參考價值，需要的小伙伴可以參考一下
2022-03-03
js html css實現(xiàn)復(fù)選框全選與反選
這篇文章主要為大家詳細介紹了js實現(xiàn)復(fù)選框全選與反選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
asp.net HttpHandler實現(xiàn)圖片防盜鏈
這個例子來自于《Maximizing ASP.NET Real World, Object-Oriented Development》一書, 需要的朋友可以參考下。
2009-11-11