記一次後端開發者，如何完成前端下拉框三級聯動功能？

時間 2019-11-26

標籤一次後端開發者如何完成前端下拉三級聯動功能欄目職業生涯简体版

原文原文鏈接

前言javascript

下拉框三級聯動這個對於咱們你們都很常見，常常在註冊一些信息的時候，須要選取省市縣等信息，我須要完成的就是這個功能。html

可是無奈這個項目沒有前端開發，而我是一個~專一夾克20年~咦，勁霸男裝？哦~不，是專一後端開發5年~早期學習的jquery，還能記起的經常使用方法很少了~就知道$("#id")~~~前端

可是你要知道一個程序員的可（謎）怕（之）之（自）處（信）是，只要你給我一根網線，我就以爲我能造出飛機（手動狗頭）。java

紙飛機jquery

先搞三個下拉框~程序員

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

百度到了 JSON.parse() 方法~好~就你了~後端

var jsarr=JSON.parse(jsonData);

有了數組，剩下要作什麼？把每一個數組的key取出來，放到省級的隊列中，value再進行拆分紅市和縣，對就這麼幹~數組

可是這個時候的關鍵就是~你應該怎麼描述你的需求，把它輸入到百度搜索框中~~我描述可能太過於專業，以致於百度不能回答（手動狗頭），找了半天沒找到用什麼方法拆這個數組，而後又想用最土的方式split~拆分，可是看了看數據感受這麼作有點pia氣啊。app

就在我冷靜思考的時候，忽然靈光一現，別的組不是有我認識的前端大佬麼，因而我默默的打開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>