前言
下拉框三级联动这个对于我们大家都很常见，经常在注册一些信息的时候，需要选取省市县等信息，我需要完成的就是这个功能。
但是无奈这个项目没有前端开发，而我是一个~专注夹克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() 方法~好~就你了~
| 1 | var jsarr=JSON.parse(jsonData); |
有了数组，剩下要做什么？把每个数组的key取出来，放到省级的队列中，value再进行拆分成市和县，对就这么干~
但是这个时候的关键就是~你应该怎么描述你的需求，把它输入到百度搜索框中~~我描述可能太过于专业，以至于百度不能回答（手动狗头），找了半天没找到用什么方法拆这个数组，然后又想用最土的方式split~拆分，但是看了看数据感觉这么做有点pia气啊。
就在我冷静思考的时候，突然灵光一现，别的组不是有我认识的前端大佬么，于是我默默的打开qq，找到大佬，输入 “帮我看下这个数据怎么用js写一个三级联动？~~这是拿到的数据，json结构”~回车，经过简单的沟通后，大佬说稍等，我给你出个demo。
得，倒杯水，静候佳音。
歼20
若干分钟后，大佬直接甩给我一个html，打开一看，就是它了。
按下f12，看一看源码，这样是不是显得我很专业~（手动狗头）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三级联动</title> 6 <script 7 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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了。
（注：上面代码中，注释部分由我自己理解后添加！）
我们不生产水，我们只是大自然的搬用工
什么？让我自己去写一个？不可能的，这辈子都不可能的，前端各个都是人才，说话又好听，办事效率也高。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
