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)文章

JS動態(tài)遍歷json中所有鍵值對的方法(不知道屬性名的情況)
這篇文章主要介紹了JS動態(tài)遍歷json中所有鍵值對的方法,實例分析了針對不知道屬性名的情況簡單遍歷json鍵值對的操作技巧,需要的朋友可以參考下
2016-12-12
javascript中indexOf技術(shù)詳解
indexOf()函數(shù)用于查找子字符串在當前字符串中第一次出現(xiàn)的位置。該函數(shù)屬于String對象，所有主流瀏覽器均支持該函數(shù)。下面我們就來詳細探討下javascript的index0f()函數(shù)
2015-05-05
JavaScript實現(xiàn)手寫call/apply/bind的示例代碼
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)手寫call/apply/bind的方法，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2023-02-02
JavaScript中所有聲明變量的方式及特性總結(jié)
在JavaScript中,變量的定義是編程的基礎(chǔ),而JavaScript提供了多種靈活的方式來定義變量,本文將詳細盤點JavaScript中所有變量定義的方式,并結(jié)合代碼示例進行說明,需要的朋友可以參考下
2025-01-01
關(guān)于layui flow loading占位圖的實現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
不要小看注釋掉的JS 引起的安全問題
HTTP Response Splitting 攻擊主要說明的是兩個問題
2008-12-12
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下
2021-12-12
Three.js利用性能插件stats實現(xiàn)性能監(jiān)聽的方法
Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創(chuàng)建各種三維場景，而下面這篇文章主要給大家介紹了關(guān)于Three.js如何利用性能插件stats實現(xiàn)性能監(jiān)聽的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-09-09
bootstrap校驗laydate起止日期聯(lián)動失效問題及解決方法
這篇文章主要介紹了bootstrap校驗laydate起止日期聯(lián)動失效問題,項目中用到bootstrapValidator，以及l(fā)aydate（by:賢心，插件效果美觀），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-01-01
JavaScript實現(xiàn)九宮格抽獎功能的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript實現(xiàn)九宮格抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02