记一次后端开发者,如何完成前端下拉框三级联动功能?

前言

下拉框三级联动这个对于我们大家都很常见,经常在注册一些信息的时候,需要选取省市县等信息,我需要完成的就是这个功能。

但是无奈这个项目没有前端开发,而我是一个~专注夹克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了。

(注:上面代码中,注释部分由我自己理解后添加!)

 

我们不生产水,我们只是大自然的搬用工

什么?让我自己去写一个?不可能的,这辈子都不可能的,前端各个都是人才,说话又好听,办事效率也高。