記一次後端開發者，如何完成前端下拉框三級聯動功能？
前言
下拉框三級聯動這個對於我們大家都很常見，經常在註冊一些資訊的時候，需要選取省市縣等資訊，我需要完成的就是這個功能。
但是無奈這個專案沒有前端開發，而我是一個~專注夾克20年~咦，勁霸男裝？哦~不，是專注後端開發5年~早期學習的jquery，還能記起的常用方法不多了~就知道$("#id")~~~
但是你要知道一個程式設計師的可（謎）怕（之）之（自）處（信）是，只要你給我一根網線，我就覺得我能造出飛機（手動狗頭）。
紙飛機
先搞三個下拉框~
1 <select id='province' style="background:#FFF; color:#000;width:150px"> 2</select> 3 <select id='city' style="background:#FFF; color:#000;width:150px"> 4 </select> 5 <select id='company' style="background:#FFF; color:#000;width:150px"> 6 </select>
來源資料是通過excel解析後的，json字串，百度後看到的都是陣列形式傳入的資料，我這個json字串怎麼轉陣列？？？
百度到了 JSON.parse() 方法~好~就你了~
var jsarr=JSON.parse(jsonData);
有了陣列，剩下要做什麼？把每個陣列的key取出來，放到省級的佇列中，value再進行拆分成市和縣，對就這麼幹~
但是這個時候的關鍵就是~你應該怎麼描述你的需求，把它輸入到百度搜索框中~~我描述可能太過於專業，以至於百度不能回答（手動狗頭），找了半天沒找到用什麼方法拆這個陣列，然後又想用最土的方式split~拆分，但是看了看資料感覺這麼做有點pia氣啊。
就在我冷靜思考的時候，突然靈光一現，別的組不是有我認識的前端大佬麼，於是我默默的開啟qq，找到大佬，輸入 “幫我看下這個資料怎麼用js寫一個三級聯動？~~這是拿到的資料，json結構”~回車，經過簡單的溝通後，大佬說稍等，我給你出個demo。
得，倒杯水，靜候佳音。
殲20
若干分鐘後，大佬直接甩給我一個html，開啟一看，就是它了。
按下f12，看一看原始碼，這樣是不是顯得我很專業~（手動狗頭）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三級聯動</title> 6 <script 7 src="https://code.jquery.com/jquery-1.12.4.min.js" 8 integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 9 crossorigin="anonymous"></script> 10 </head> 11 <body> 12 <select id='province' style="background:#FFF; color:#000;width:150px"> 13 </select> 14 <select id='city' style="background:#FFF; color:#000;width:150px"> 15 </select> 16 <select id='company' style="background:#FFF; color:#000;width:150px"> 17 </select> 18 <script type="text/javascript"> 19 20 var data = { 21 '陝西':{'西安':['西安公司1','西安公司2','西安公司3'],'不喜歡':['渭南公司1','渭南公司2','渭南公司3'],'咸陽':['咸陽公司1','咸陽公司2','咸陽公司3']}, 22 '陝西A':{'西安A':['西安A公司1','西安A公司2','西安A公司3'],'渭南A':['渭南A公司1','渭南A公司2','渭南A公司3'],'咸陽A':['咸陽A公司1','咸陽A公司2','咸陽A公司3']}, 23 '陝西B':{'西安B':['西安B公司1','西安B公司2','西安B公司3'],'渭南B':['渭南B公司1','渭南B公司2','渭南B公司3'],'咸陽B':['咸陽B公司1','咸陽B公司2','咸陽B公司3']}, 24 }; 25 26 var Province = ''; 27 function pleaseChoose(){ 28 return '<option value="請選擇">請選擇</option>' 29 } 30 function setProvince(){ //先拿到陣列，然後獲取陣列的key集合，然後增加一個option標籤，通過迴圈key集合，生成option，追加到省級下拉框中 31 let province = Object.keys(data); 32 let provinceOption =pleaseChoose(); 33 for (var i = 0; i < province.length; i++) { 34 provinceOption = provinceOption+('<option value="'+province[i]+'">'+province[i]+'</option>') 35 } 36 $("#province").append(provinceOption) 37 } 38 39 function setCity(val){ //同上 40 let city = Object.keys(data[val]); 41 let cityOption =pleaseChoose(); 42 for (var i = 0; i < city.length; i++) { 43 cityOption = cityOption+('<option value="'+city[i]+'">'+city[i]+'</option>') 44 } 45 $("#city").append(cityOption) 46 } 47 function setCompany(province,city){ //同上 48 let company = data[province][city]; 49 let companyOption =pleaseChoose();; 50 for (var i = 0; i < company.length; i++) { 51 companyOption = companyOption+('<option value="'+company[i]+'">'+company[i]+'</option>') 52 } 53 $("#company").append(companyOption) 54 } 55 56 $("#province").on("change",function(){ //當省級下拉框選項改變，就清空市級，縣級下拉框，並且將當前選擇的值，傳遞給市級下拉框的方法， 57 $("#city").empty(); 58 $("#company").empty(); 59 var val = $("option:selected",this).val(); 60 Province = val; 61 setCity(val) 62 63 }); 64 $("#city").on("change",function(){ //同上 65 $("#company").empty(); 66 var city = $("option:selected",this).val(); 67 setCompany(Province,city) 68 }); 69 70 71 $(function(){ //dom載入完成後，就呼叫該方法 72 setProvince(); 73 }); 74 </script> 75 </body> 76 </html>
仔細看了看程式碼，Object.keys() 就是我想要的那個方法（發呆.gif）~~~額~在這個demo裡面我唯一需要修改的，就是把我的json串轉陣列的方法的程式碼加上去就ok了。
（注：上面程式碼中，註釋部分由我自己理解後新增！）
我們不生產水，我們只是大自然的搬用工
什麼？讓我自己去寫一個？不可能的，這輩子都不可能的，前端各個都是人才，說話又好聽，辦事效率也高。