記一次後端開發者，如何完成前端下拉框三級聯動功能？
前言
下拉框三級聯動這個對於我們大家都很常見，經常在註冊一些資訊的時候，需要選取省市縣等資訊，我需要完成的就是這個功能。
但是無奈這個專案沒有前端開發，而我是一個~專注夾克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
7src="https://code.jquery.com/jquery-1.12.4.min.js"
8integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
9crossorigin="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
20var 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
26var Province = '';
27function pleaseChoose(){
28return '<option value="請選擇">請選擇</option>'
29}
30function setProvince(){//先拿到陣列，然後獲取陣列的key集合，然後增加一個option標籤，通過迴圈key集合，生成option，追加到省級下拉框中
31let province = Object.keys(data);
32let provinceOption =pleaseChoose();
33for (var i = 0; i < province.length; i++) {
34provinceOption = provinceOption+('<option value="'+province[i]+'">'+province[i]+'</option>')
35}
36$("#province").append(provinceOption)
37}
38
39function setCity(val){//同上
40let city = Object.keys(data[val]);
41let cityOption =pleaseChoose();
42for (var i = 0; i < city.length; i++) {
43cityOption = cityOption+('<option value="'+city[i]+'">'+city[i]+'</option>')
44}
45$("#city").append(cityOption)
46}
47function setCompany(province,city){//同上
48let company = data[province][city];
49let companyOption =pleaseChoose();;
50for (var i = 0; i < company.length; i++) {
51companyOption = 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();
59var val = $("option:selected",this).val();
60Province = val;
61setCity(val)
62
63});
64$("#city").on("change",function(){//同上
65$("#company").empty();
66var city = $("option:selected",this).val();
67setCompany(Province,city)
68});
69
70
71$(function(){//dom載入完成後，就呼叫該方法
72setProvince();
73});
74</script>
75 </body>
76 </html>
仔細看了看程式碼，Object.keys() 就是我想要的那個方法（發呆.gif）~~~額~在這個demo裡面我唯一需要修改的，就是把我的json串轉陣列的方法的程式碼加上去就ok了。
（注：上面程式碼中，註釋部分由我自己理解後新增！）
我們不生產水，我們只是大自然的搬用工
什麼？讓我自己去寫一個？不可能的，這輩子都不可能的，前端各個都是人才，說話又好聽，辦事效率也高。