因?yàn)橐齁query太麻煩了滋将，嘗試用原生寫(xiě)一個(gè)關(guān)于省級(jí)聯(lián)動(dòng)這種類(lèi)似功能的捏悬。
這里想要的效果是如果選擇省份，自動(dòng)出現(xiàn)省份對(duì)應(yīng)的城市?
首先验庙，后臺(tái)返回的數(shù)據(jù)結(jié)構(gòu)是這樣子的
然后顶吮，我要把這些需要展示聯(lián)動(dòng)的關(guān)鍵字剝離開(kāi)來(lái)，在這兒就是cityName粪薛，和它的store里面的address
result.map(item=>{
????????????????????????city.push({label:item.cityName,store:item.store});
????????????????????})
????????????????????city.map((item,index) =>{
????????????????????????var city = item.label;
????????????????????????temp = [];
????????????????????????if(item.store.length > 1){
????????????????????????????item.store.map((item,index)=>{
????????????????????????????????temp.push(item.shopName);
????????????????????????????})
????????????????????????????area[city] = temp;
????????????????????????}else {
????????????????????????????area[city] = [item.store[0].shopName];
????????????????????????}???
????????????????????})??
????????????????????console.log(area);
把這些數(shù)據(jù)處理完之后云矫，出現(xiàn)這樣的效果
接下來(lái)，html結(jié)構(gòu)
<select id="selProvince" onchange="changeCity()">
? <option>請(qǐng)選擇省份</option>
</select>
<select id="selCity">
? <option>請(qǐng)選擇城市</option>
</select>
第一汗菜，這個(gè)是為了更簡(jiǎn)單的寫(xiě)語(yǔ)句让禀，類(lèi)似于Jquery的寫(xiě)法
function $(ID){?
????????return document.getElementById(ID);
????} //?
第二步，把整理好的數(shù)據(jù)陨界，塞到各個(gè)option里面
????var province = $("selProvince");
????????????????????for (var i in area) {
????????????????????????province.add(new Option(i,i),null);
????????????????????}???
第三巡揍，動(dòng)態(tài)響應(yīng)，觸發(fā)onchange事件菌瘪，選擇哪個(gè)腮敌，就出來(lái)相對(duì)應(yīng)的option
????function changeCity(){
????????????var province = $("selProvince").value;
????????????var city = $("selCity");
????????????city.options.length = 0;
????????????for (var i in area) {
????????????????if(i == province){
????????????????????for (var j in area[i]) {
????????????????????????city.add(new Option(area[i][j],area[i][j]),null);
????????????????????}
????????????????}
????????????}
????????}
其中用到兩個(gè)知識(shí)點(diǎn)
一、add(),引用官方解釋
定義和用法
add() 方法用于向 <select> 添加一個(gè) <option> 元素俏扩。
語(yǔ)法
selectObject.add(option,before)
參數(shù)描述
option必需糜工。要添加選項(xiàng)元素。必需是 option 或 optgroup 元素录淡。
before必需捌木。在選項(xiàng)數(shù)組的該元素之前增加新的元素。如果該參數(shù)是null嫉戚，元素添加到選項(xiàng)數(shù)組的末尾刨裆。
二、new option(); 一般用在動(dòng)態(tài)生成選擇項(xiàng)目
new Option("顯示的文本labe","值value",true,true)
后面兩個(gè)true分別表示默認(rèn)被選中和有效!,可寫(xiě)可不寫(xiě)
最后文章的末尾放上所有代碼 ：
<!DOCTYPE html>
<html lang="zh">
<head>
????<meta charset="UTF-8">
????<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
????<meta name="viewport" content="width=device-width, initial-scale=1.0">
????<title>title</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
? <option>請(qǐng)選擇省份</option>
</select>
<select id="selCity">
? <option>請(qǐng)選擇城市</option>
</select>
<script >
????window.onload = function(){
????????if(window.XMLHttpRequest){
????????????var oAjax = new XMLHttpRequest();//創(chuàng)建ajax對(duì)象
????????}else {
????????????var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
????????}
????????oAjax.open("Post","XXXXXX請(qǐng)求的接口地址",true);?
????????oAjax.send();
????????oAjax.onreadystatechange = function(){
????????????if(oAjax.readyState == 4) {
????????????????if(oAjax.status == 200){? ? ?
????????????????????result = JSON.parse(oAjax.responseText).resultData.result_org;
????????????????????city= [];
????????????????????area = [];
????????????????????result.map(item=>{
????????????????????????city.push({label:item.cityName,store:item.store});
????????????????????})
????????????????????city.map((item,index) =>{
????????????????????????var city = item.label;
????????????????????????temp = [];
????????????????????????if(item.store.length > 1){
????????????????????????????item.store.map((item,index)=>{
????????????????????????????????temp.push(item.shopName);
????????????????????????????})
????????????????????????????area[city] = temp;
????????????????????????}else {
????????????????????????????area[city] = [item.store[0].shopName];
????????????????????????}???
????????????????????})??
????????????????????var province = $("selProvince");
????????????????????for (var i in area) {
????????????????????????province.add(new Option(i,i),null);
????????????????????}???
????????????????}else{
????????????????????console.log("失敗");
????????????????}
????????????}
????????};
????}
????function $(ID){?
????????return document.getElementById(ID);
????}
????function changeCity(){
????????????var province = $("selProvince").value;
????????????var city = $("selCity");
????????????city.options.length = 0;
????????????for (var i in area) {
????????????????if(i == province){
????????????????????for (var j in area[i]) {
????????????????????????city.add(new Option(area[i][j],area[i][j]),null);
????????????????????}
????????????????}
????????????}
????}
</script>
</body>
</html>
