整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          原生JS簡(jiǎn)單快速實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(含行政代碼cod

          原生JS簡(jiǎn)單快速實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(含行政代碼code)

          備工作

          省市區(qū)三級(jí)聯(lián)動(dòng)所需文件:評(píng)論回復(fù)區(qū)

          文件說明:

          整個(gè)文件為一個(gè)大的對(duì)象(非數(shù)組類型)

          其中對(duì)象的屬性名 100000 中包含所有省份,它也是一個(gè)對(duì)象格式的;

          對(duì)象名為100000的每個(gè)屬性中的屬性名都為數(shù)字類型(其實(shí)是該地區(qū)的行政代碼)。數(shù)字屬性名對(duì)應(yīng)的屬性值是該地區(qū)的名稱,同時(shí)也可以通過該屬性名訪問到它下級(jí)的市列表。

          eg:

          			import districts from './js/districts.js'
          			console.log(districts[100000])
          

          比如當(dāng)我們想獲取到行政代碼130000河北省下面的市級(jí)列表時(shí):

          			import districts from './js/districts.js'
          			console.log(districts[130000])
          

          然后當(dāng)我們想獲得行政代碼130100石家莊市下的區(qū)級(jí)列表時(shí):

          			import districts from './js/districts.js'
          			console.log(districts[130100])
          

          沒錯(cuò),省市中的每一個(gè)行政代碼屬性名都對(duì)應(yīng)著它下一級(jí)(省行政代碼對(duì)應(yīng)市列表,市行政代碼對(duì)應(yīng)區(qū)列表)的對(duì)象列表。不存在數(shù)組對(duì)象嵌套。及其簡(jiǎn)單方便。

          創(chuàng)建 option 標(biāo)簽簡(jiǎn)便API

          new Option('innerText', 'value屬性對(duì)應(yīng)的值')

          類似于傳統(tǒng)寫法:

          let option_1=document.createElement('option')

          option_1.text='innerText'

          option_1.value='value屬性對(duì)應(yīng)的值'

          嗯,沒什么區(qū)別,但是第一種簡(jiǎn)單很多:

          清空 select標(biāo)簽中的option標(biāo)簽極簡(jiǎn)方法:

          selectDOM.options.length=0

          .html文件中使用模塊化

          script 標(biāo)簽改為 type 屬性改為 module <script type="module">

          創(chuàng)建三個(gè) select標(biāo)簽,分別用來存放 省級(jí)列表,市級(jí)列表,區(qū)級(jí)列表,并定義好變量:

          HTML:

          		<!-- 省級(jí)列表 -->
          		<select id="province"></select>
          		<!-- 市級(jí)列表 -->
          		<select id="city"></select>
          		<!-- 區(qū)級(jí)列表 -->
          		<select id="area"></select>
          

          JS:

          			// 獲取省市區(qū)selectDOM節(jié)點(diǎn)
          			let oProvince=document.getElementById('province')
          			let oCity=document.getElementById('city')
          			let oArea=document.getElementById('area')
          

          定義一個(gè)特定對(duì)應(yīng),用戶將用戶選中的結(jié)果獲取到:

          			let data={
          				province: {},
          				city: {},
          				area: {}
          			}
          

          第一步,渲染省份列表

          1,引入省市區(qū)文件 import districts from './js/districts.js'

          直接一個(gè)for in 循環(huán) districts[100000] 即可;

          然后在循環(huán)中創(chuàng)建option標(biāo)簽,并插入到省級(jí)select節(jié)點(diǎn)中:

          			let provinceList=districts[100000] 
          			for (let province in provinceList) {
          				oProvince.options.add( new Option(provinceList[province], province) )
          			}
          

          效果:

          這樣我們的第一個(gè)select標(biāo)簽就完成了

          第二步,渲染市級(jí)列表

          ps: 市級(jí)列表市基于省級(jí)之后才開始渲染的,所以應(yīng)該在省級(jí)select改變之后觸發(fā)(onchange事件)

          1,首先拿到用戶選中的是第幾個(gè)option;

          通過selectDOM的selectedIndex可拿到對(duì)應(yīng)索引值:

          然后通過children獲取option子元素列表,之后直接拿對(duì)應(yīng)索引即可!

          eg: this.children[this.selectedIndex], 因?yàn)槭?strong>onChange事件,this指代selectDOM。

          在操作之前,可以先把用戶選中的省份數(shù)據(jù)存放在我們提前定義好的data對(duì)象中的province對(duì)象中:

          data.province.code=this.children[this.selectedIndex].value
          data.province.value=this.children[this.selectedIndex].text
          

          即此時(shí)數(shù)據(jù)應(yīng)為是:

          在數(shù)據(jù)存完之后我們就可以著手渲染我們的市級(jí)select標(biāo)簽了。

          1,首先不管市級(jí)select中有沒有option標(biāo)簽,我們先給它清除一遍(因?yàn)槊總€(gè)省份對(duì)應(yīng)的市都不一樣,如果不清除則下面渲染的市級(jí)option列表中含有上一個(gè)省份的市級(jí)option列表

          oCity.options.length=0
          

          2,清除完成之后我們用省級(jí)行政代碼(code)去獲取對(duì)應(yīng)的市級(jí)列表即可:

          districts['省級(jí)行政代碼'] 等于對(duì)應(yīng)市級(jí)列表

          districts[data.province.code] // 獲取用戶選中的省份的市級(jí)列表
          

          eg:

          拿到該省份的對(duì)應(yīng)市級(jí)列表之后,我們只需要向渲染省級(jí)列表一樣渲染市級(jí)列表即可:

          第三步,渲染區(qū)級(jí)列表

          第三步同第二步基本完全一樣,我們完全可以讓它兩共用一個(gè)函數(shù):

          在市級(jí)列表的onChange事件觸發(fā)之后執(zhí)行,

          存儲(chǔ)用戶選中的市的code以及市名。

          用獲取到的市級(jí)code去換對(duì)應(yīng)的區(qū)級(jí)列表即可(因?yàn)椴淮嬖跀?shù)組對(duì)象嵌套,所以同省級(jí)code換市列表一樣);

          districts[data.province.code] // 獲取用戶選中的市級(jí)的區(qū)級(jí)列表
          

          在渲染區(qū)級(jí)之前先清空一直區(qū)級(jí)select下的option標(biāo)簽列表

          eg:

          代碼同上基本一樣,除了需要注意此時(shí)我們的存值的對(duì)應(yīng)是我們事先定義好的市級(jí)對(duì)應(yīng)city而不是province即可。

          當(dāng)區(qū)級(jí)select標(biāo)簽onChange事件觸發(fā)時(shí)

          區(qū)級(jí)的 onChange 事件觸發(fā),此時(shí)我們已經(jīng)不需要再給渲染新的 select 標(biāo)簽了(因?yàn)椴皇撬募?jí)聯(lián)動(dòng),其實(shí)都一樣啦,大不了再?gòu)?fù)制一層唄)。所以我們只需要把用戶選中的結(jié)果存放在我們事先定義好的 data 中的 area 區(qū)級(jí)對(duì)象即可。

          這樣,當(dāng)用戶選擇完畢之后,我們就會(huì)得到一個(gè)很清晰的對(duì)象了。

          至此基本完工。

          完善

          初步渲染完成時(shí)應(yīng)該給它下級(jí)一個(gè)默認(rèn)值,這樣如果用戶不選了不至于獲取到的數(shù)據(jù)不完整:

          1,渲染完省級(jí)列表時(shí)默認(rèn)給它一個(gè)選中的市,并存值。

          使用element.dispatchEvent().。實(shí)現(xiàn)onChange事件初始化觸發(fā)

          參考資料:https://www.jianshu.com/p/5f9027722204

          此時(shí)瀏覽器剛刷新數(shù)據(jù)為:

          源碼(不含省市區(qū)文件,省市區(qū)文件將開頭):

          <!DOCTYPE html>
          <html>
          	<head>
          		<meta charset="utf-8" />
          		<title></title>
          		<style type="text/css">
          			select {
          				height: 30px;
          				margin-right: 10px;
          			}
          		</style>
          	</head>
          	<body>
          		<!-- 省級(jí)列表 -->
          		<select id="province"></select>
          		<!-- 市級(jí)列表 -->
          		<select id="city"></select>
          		<!-- 區(qū)級(jí)列表 -->
          		<select id="area"></select>
          		
          		<script type="module">
          			// 引入省市區(qū)文件
          			import districts from './js/districts.js'
          			
          			// 獲取省市區(qū)selectDOM節(jié)點(diǎn)
          			let oProvince=document.getElementById('province')
          			let oCity=document.getElementById('city')
          			let oArea=document.getElementById('area')
          			
          			// 存儲(chǔ)用戶選中的值
          			let data={
          				province: {},
          				city: {},
          				area: {}
          			}
          			
          			// 渲染省級(jí)select標(biāo)簽
          			let provinceList=districts[100000] 
          			for (let province in provinceList) {
          				oProvince.options.add( new Option(provinceList[province], province) )
          			}
          			
          			
          			// 當(dāng)用戶選中某個(gè)省份時(shí)觸發(fā)
          			oProvince.addEventListener('change', function() {
          				// 先清空之前的市級(jí)<select>標(biāo)簽下的option列表
          				oCity.options.length=0
          				// 保存省級(jí)數(shù)據(jù)
          				data.province.code=this.children[this.selectedIndex].value
          				data.province.value=this.children[this.selectedIndex].text
          				// 渲染市級(jí)列表
          				for(let city in districts[data.province.code]) {
          					oCity.options.add( new Option(districts[data.province.code][city], city) )
          				}
          			}, false)
          			
          			
          			// 當(dāng)用戶選中某個(gè)市時(shí)觸發(fā)
          			oCity.addEventListener('change', function() {
          				oArea.options.length=0
          				// 保存市級(jí)數(shù)據(jù)
          				data.city.code=this.children[this.selectedIndex].value
          				data.city.value=this.children[this.selectedIndex].text
          				// 渲染區(qū)級(jí)列表
          				for(let city in districts[data.city.code]) {
          					oArea.options.add( new Option(districts[data.city.code][city], city) )
          				}
          			}, false)
          			
          			// 當(dāng)用戶選中每個(gè)區(qū)時(shí)觸發(fā)
          			oArea.onchange=function () {
          				// 保存區(qū)級(jí)數(shù)據(jù)
          				data.area.code=this.children[this.selectedIndex].value
          				data.area.value=this.children[this.selectedIndex].text
          			}
          			
          			/**
          			 * 渲染完成初始化
          			 * @params dom selectDOM 
          			 */
          			function initSelect (dom) {
          				let createE=document.createEvent('HTMLEvents')
          				createE.initEvent("change", true, true)
          				dom.dispatchEvent(createE)
          			} 
          			initSelect(oProvince)
          			initSelect(oCity)
          			initSelect(oArea)
          			console.log(data)
          		</script>
          	</body>
          </html>
          

          至此基本完成啦。

          用javascript中變量定義省份及對(duì)應(yīng)的城市,應(yīng)用Select標(biāo)簽對(duì)象,實(shí)現(xiàn)二級(jí)級(jí)聯(lián)的下拉菜單選中效果。也就是說,在省份下拉菜單中,選中一個(gè)省份時(shí),在城市下拉菜單中出現(xiàn)對(duì)應(yīng)城市選擇內(nèi)容,效果如下:

          當(dāng)選擇廣東為省份的時(shí)候,城市欄會(huì)自動(dòng)識(shí)別廣東省下的城市展示出來

          當(dāng)省份選擇廣東省份的時(shí)候,去點(diǎn)擊城市的選擇欄會(huì)出現(xiàn)廣東對(duì)應(yīng)的城市選擇!

          具體代碼如下:

          html:

          javascript:

          報(bào)志愿需關(guān)注的網(wǎng)站

          ● 陽光高考網(wǎng):教育部官方發(fā)布網(wǎng)站,有強(qiáng)基計(jì)劃,綜合評(píng)價(jià),高校專項(xiàng)等的簡(jiǎn)章報(bào)名或申請(qǐng) 各大學(xué)校的招生章程,專業(yè)設(shè)置,考研和就業(yè)信息等。可以查專業(yè)、查院校,還有各種志愿填報(bào)常見問題匯總等。

          https://gaokao.chsi.com.cn/xxgk/

          ● 本省考試院官網(wǎng) :本省的政策批次設(shè)置,填報(bào)時(shí)間,一分一段表,大學(xué)往年的投檔分,招生計(jì)劃征集志愿等。要常常登陸該網(wǎng)站,志愿填報(bào)也是在該網(wǎng)站進(jìn)行。比如● 河北省教育考試院http://www.hebeea.edu.cn

          ● 目標(biāo)高校的本科招生網(wǎng):學(xué)校和專業(yè)的錄取分?jǐn)?shù)線,招生計(jì)劃,院系設(shè)置,師資力量等

          ● 學(xué)位與研究生信息網(wǎng):查詢各大學(xué)的學(xué)科評(píng)估結(jié)果,哪些專業(yè)是好專業(yè) http://www.cdgdc.edu.cn/xwyyjsjyxx/xkpgjg/


          ● 河北招生考試信息服務(wù)網(wǎng)http://www.hebeeb.com

          ● 中外合作辦學(xué)監(jiān)管信息平臺(tái)

          ● 大學(xué)生必備網(wǎng)https://m.dxsbb.com/news/7454.html 各個(gè)省份高校查詢

          ● 研招網(wǎng):https://yz.chsi.com.cn/wap/

          ● 公眾號(hào):青塔 軟科

          ● 國(guó)家高等教育智慧教育平臺(tái)https://higher.smartedu.cn/subjects

          ● 報(bào)考軍校要知道的三個(gè)權(quán)威信息來源:軍校招生(公眾號(hào))、黃埔一號(hào)v軍校(公眾號(hào))、中國(guó)軍網(wǎng)(公眾號(hào))


          ● 志愿填報(bào)期間,每天0時(shí)—6時(shí)為系統(tǒng)維護(hù)時(shí)間,不能填報(bào)志愿。

          ● 填報(bào)志愿網(wǎng)站:https://gk.hebeea.edu.cn

          ● 高考網(wǎng)址導(dǎo)航http://www.gaokao789.com

          ● 填報(bào)志愿機(jī)構(gòu)匯總 學(xué)業(yè)有方 https://mall.futuresquare.cn/home

          ● 考試成績(jī)查詢途徑如下:

          ● 1.河北省教育考試院網(wǎng)站:http://www.hebeea.edu.cn

          ● 2.河北招生考試信息服務(wù)網(wǎng):http://www.hebeeb.com


          主站蜘蛛池模板: 亚洲中文字幕丝袜制服一区| 国产伦精品一区二区三区视频小说| 日韩精品久久一区二区三区| 久久精品国产一区二区| 无码中文字幕一区二区三区| 国产精品免费一区二区三区四区| 一区二区免费国产在线观看| 免费无码一区二区三区蜜桃大| 无码一区二区三区视频| 一区二区三区在线观看免费| 日韩三级一区二区三区| 精品视频一区二区三区四区| 色欲综合一区二区三区| 冲田杏梨AV一区二区三区| 色狠狠色狠狠综合一区| 亚拍精品一区二区三区| 一区二区三区观看免费中文视频在线播放 | 国产日韩精品一区二区三区| 呦系列视频一区二区三区| 99精品一区二区三区| 91video国产一区| 亚洲中文字幕乱码一区| 性色AV一区二区三区天美传媒| 91成人爽a毛片一区二区| 色狠狠色狠狠综合一区| 色综合视频一区二区三区44| 精品久久综合一区二区| 免费在线视频一区| 国产精品区AV一区二区| 国产精品日本一区二区不卡视频| 久久一区不卡中文字幕| AV无码精品一区二区三区| 国内精品视频一区二区三区| 福利一区二区三区视频午夜观看| 日本精品少妇一区二区三区| 国精品无码A区一区二区| 亚洲一区二区中文| 精品国产一区二区三区久| 亚洲国产精品成人一区| 少妇特黄A一区二区三区| 无码日本电影一区二区网站|