「?? 作者：極客小俊」
「?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

我們今天來使用純javascript來實(shí)現(xiàn)一個(gè)簡(jiǎn)易的三級(jí)聯(lián)動(dòng)效果，不使用任何框架以及插件!??????

Javascript + JSON + 數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng) ??

準(zhǔn)備數(shù)據(jù) ??

這里我們就用測(cè)試JSON數(shù)據(jù)即可, 數(shù)據(jù)內(nèi)容你可以隨意! 如下

var data=[
{"name":'中國(guó)',"val":"ch","city":
? ? [
? ? ? ? {"name":"重慶市","val":"cqs","area":[
? ? ? ? ? ? ? ? {"name":"渝中區(qū)"},
? ? ? ? ? ? ? ? {"name":"江北區(qū)"}
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {"name":"深圳市","val":"szs","area":[
? ? ? ? ? ? ? ? {"name":"浦東"},
? ? ? ? ? ? ? ? {"name":"浦西"}
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
},

{"name":'美國(guó)',"val":"ag","city":
? ? [
? ? ? ? {"name":"紐約","val":"newyork","area":[
? ? ? ? ? ? ? ? {"name":"皇后區(qū)"},
? ? ? ? ? ? ? ? {"name":"時(shí)代廣場(chǎng)"}
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {"name":"華盛頓","val":"hsd","area":[
? ? ? ? ? ? ? ? {"name":"白宮"},
? ? ? ? ? ? ? ? {"name":"神盾局"}
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}
];

HTML代碼結(jié)構(gòu)??

國(guó)家：<select id="pro">
<option value="">請(qǐng)選擇省份</option>
</select>
城市: <select id="city">
<option value="">請(qǐng)選擇市</option>
</select>
地區(qū): <select id="area">
<option value="">請(qǐng)選擇區(qū)</option>
</select>

javascript代碼邏輯 ???

? ? ? ?var _pro=document.getElementById("pro");
? ? ? ?var _city=document.getElementById("city");
? ? ? ?var _area=document.getElementById("area");

? ? ? ?for(var i=0;i<data.length;i++){
? ? ? ? ? ?var _op=document.createElement("option");
? ? ? ? ? ?_op.value=data[i].val;
? ? ? ? ? ?_op.innerHTML=data[i].name;
? ? ? ? ? ?_pro.appendChild(_op);
? ? ? ?};


? ? ? ?_pro.onchange=function(){
? ? ? ? ? ?_city.innerHTML="";
? ? ? ? ? ?_area.innerHTML="";
? ? ? ? ?
? ? ? ? ? ?if(this.value==""){
? ? ? ? ? ? ? ?var _oPempty1=document.createElement("option");
? ? ? ? ? ? ? ?_oPempty1.value=''
? ? ? ? ? ? ? ?_oPempty1.innerHTML='請(qǐng)選擇市';
? ? ? ? ? ? ? ?_city.appendChild(_oPempty1);

? ? ? ? ? ? ? ?var _oPempty2=document.createElement("option");
? ? ? ? ? ? ? ?_oPempty2.value=''
? ? ? ? ? ? ? ?_oPempty2.innerHTML='請(qǐng)選擇區(qū)';
? ? ? ? ? ? ? ?_area.appendChild(_oPempty2);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?for(var i=0;i<data.length;i++){
? ? ? ? ? ? ? ? ? ?if(this.value==data[i].val){ ?
? ? ? ? ? ? ? ? ? ? ? ? ? ?for(var j=0;j<data[i].city.length;j++){ ?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var _op2=document.createElement("option");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_op2.value=data[i].city[j].val; ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_op2.innerHTML=data[i].city[j].name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_city.appendChild(_op2);
? ? ? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ? ?for(var j=0;j<data[i].city[0].area.length;j++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var _op3=document.createElement("option");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_op3.value=data[i].city[0].area[j].name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_op3.innerHTML=data[i].city[0].area[j].name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_area.appendChild(_op3);
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}


? ? ? ?_city.onchange=function(){
? ? ? ? ? ?_area.innerHTML="";
? ? ? ? ? ?for(var i=0;i<data.length;i++){
? ? ? ? ? ? ? ?for(var j=0;j<data[i].city.length;j++){
? ? ? ? ? ? ? ? ? ?if(data[i].city[j].val==this.value){
? ? ? ? ? ? ? ? ? ? ? var len=data[i].city[j].area.length;
? ? ? ? ? ? ? ? ? ? ? ?for(var k=0;k<len;k++){
? ? ? ? ? ? ? ? ? ? ? ? ? ?var _op4=document.createElement("option");
? ? ? ? ? ? ? ? ? ? ? ? ? ?_op4.value=data[i].city[j].area[k].name;
? ? ? ? ? ? ? ? ? ? ? ? ? ?_op4.innerHTML=data[i].city[j].area[k].name;
? ? ? ? ? ? ? ? ? ? ? ? ? ?_area.appendChild(_op4);
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}

最終效果如下:

如圖

這就是使用js+json來實(shí)現(xiàn)簡(jiǎn)易的三級(jí)聯(lián)動(dòng)的效果!

對(duì)于html結(jié)構(gòu)美化大家可以自行使用css樣式進(jìn)行美化，這里就不過多贅述了!

那么接下來，我們可以使用js+數(shù)組的形式， 也來實(shí)現(xiàn)一下這個(gè)三級(jí)聯(lián)動(dòng)的效果

JS三級(jí)聯(lián)動(dòng)數(shù)組數(shù)據(jù)格式 ???

如下

var arr=['中國(guó)','美國(guó)','日本'];
? ? ? ?arr['中國(guó)']=['重慶市','北京市','上海市'];
? ? ? ?arr['美國(guó)']=['紐約','華盛頓','阿拉斯加'];
? ? ? ?arr['日本']=['東京','大阪','名古屋'];

? ? ? ?arr['重慶市']=['解放碑','沙坪壩','九龍坡'];
? ? ? ?arr['北京市']=['天安門','朝陽區(qū)','海淀區(qū)'];
? ? ? ?arr['上海市']=['黃浦江','東方明珠','黃浦區(qū)','虹口機(jī)場(chǎng)'];

? ? ? ?arr['紐約']=['皇后區(qū)','時(shí)代廣場(chǎng)','布朗克斯區(qū)'];
? ? ? ?arr['華盛頓']=['林肯紀(jì)念堂','白宮','美國(guó)國(guó)會(huì)圖書館'];
? ? ? ?arr['阿拉斯加']=['蕨草鎮(zhèn)'];

? ? ? ?arr['東京']=['東京迪士尼','銀座','東京塔'];
? ? ? ?arr['大阪']=['天守閣','天保山海游','四天王寺'];
? ? ? ?arr['名古屋']=['熱田神宮'];

HTML代碼結(jié)構(gòu) ??

國(guó)家:<select id="country"></select>
城市:<select id="province"></select>
地區(qū):<select id="area"></select>

javascript代碼實(shí)現(xiàn)邏輯 ???

function init(){
? ? fillData(arr,'country');
? ? fillData(arr['中國(guó)'],'province');
? ? fillData(arr['重慶市'],'area');

}


function fillData(arr,id){
? ? var obj=document.getElementById(id);
? ? obj.options.length=0;
? ? var i=0;
? ? var len=arr.length;
? ? for(;i<len;i++){
? ? ? ? var _Option = new Option();
? ? ? ? _Option.text=arr[i];
? ? ? ? _Option.value=arr[i];
? ? ? ? obj.add(_Option);
? ? }
}

function chchangePro(StrIndex){
? ? fillData(arr[StrIndex],'province');
? ? fillData(arr[arr[StrIndex][0]],'area');
}

function changeArea(StrIndex){
? ? fillData(arr[StrIndex],'area');
}


window.onload=function () {
? ? //初始化效果
? ? init();

? ? var _country=document.getElementById('country');
? ? var _province=document.getElementById('province');
? ? _country.onchange=function () {
? ? ? ? chchangePro(this.value);
? ? }

? ? _province.onchange=function () {
? ? ? ? changeArea(this.value);
? ? }

}

最后實(shí)現(xiàn)效果

如圖

怎么樣，js+數(shù)組也可以實(shí)現(xiàn)這種效果。哈哈哈哈 ???????

總結(jié)想法和思路??

好了我大致總結(jié)了一下思路

如下:

1. 最重要的就是先要把數(shù)組和JSON的數(shù)據(jù)結(jié)構(gòu)理解清楚,然后把數(shù)據(jù)的存儲(chǔ)結(jié)構(gòu)先寫出來.

2. For循環(huán)的結(jié)構(gòu)思路要清晰,

3. 創(chuàng)建元素要在for循環(huán)中.

4. onchange事件的使用, 當(dāng)值發(fā)生變化的時(shí)候觸發(fā)某一個(gè)方法.

5. 每次調(diào)用取值函數(shù)的時(shí)候清空一下

如果文章對(duì)你有幫助的話就請(qǐng)

??點(diǎn)贊 ??評(píng)論 ??收藏

一鍵三連哦！

如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個(gè)言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????