備工作

省市區(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：