实现三级联动效果——LayUi+JavaScript+Json

实现效果：

定义一个json数据，使用layui的select实现三级联动的效果，在点击二级分类之后，出现相应的复选框效果
页面实现效果

Json格式：

{"firstOrder": ["整车服务","系统/零部件","电池服务","自动驾驶"],
"secondOrder": {
  "整车服务": ["道路车辆","非道路车辆","轨道交通车辆","新能源车辆"],
  "系统/零部件": ["新能源","智能网联"]
},
"thirdOrder": {
  "道路车辆": ["轿车","SUV","HPV","皮卡","客车","载货车","货车非完整车","载货非完整车","专用车","摩托车","其他"],
  "非道路车辆": ["工程机械","农用拖拉机","林业机械","越野车","地形车","越野摩托车","道路运输机械","其他"],
  "轨道交通车辆": ["重型","轻型","动车","拖车","动车组","钢骨","钢轮","胶轮","单节","地铁","城市轻轨","磁悬浮","其他"],
  "新能源车辆": ["纯电动","混合动力","燃料电池","气体燃料","其他"],
  "智能网联车辆": ["驾驶辅助","部分自动化","高度自动化","完全自动化","其他"]
}}

使用ajax获取数据，并显示在页面上

layui.config({
    base : "js/"
}).use(['form','layer','jquery','laypage'],function(){
            var form=layui.form,
                $=layui.jquery;
            $.ajax({
                url:"json/demand.json",
                type:"post",
                dataType:"json",
                success:function (data) {
                       var first1='';
                       for(var i=0;i<data.firstOrder.length;i++){
                           var first='<option value='+i+'>'+data.firstOrder[i]+'</option>';
                           first1+=first;

                       }
                       $("#ps_type").append(first1);
                       //监听一级分类的变化，根据一级分类的选择内容，出现二级分类
                   form.on('select(first)',function () {
                       var second1='';
                       //获取到一级分类中选中的内容
                       var second=$("#ps_type").children('option:selected').text();
                       for(var second_1 in data.secondOrder){
                       //second_1 表示secondOrder中所有的属性名
                           if(second===second_1){
                               console.log(second_1);
                               for(var i=0;i<data.secondOrder[second_1].length;i++){
                                   var second3='<option value='+i+'>'+data.secondOrder[second_1][i]+'</option>';
                                   second1+=second3;
                               }
                               $("#ps_twotype").empty();
                               $("#ps_twotype").append(second1);
                               form.render('select');
                           }else{
                               $("#ps_twotype").empty();
                               $("#ps_twotype").append(second1);
                               form.render('select');
                           }
                       }
                   });
                   //监听二级分类的变化
                    form.on('select(second)',function () {
                        var third='';
                        var third1=$("#ps_twotype").children('option:selected').text();
                      for(var third_1 in data.thirdOrder){
                             if(third1===third_1){
                                 for(var i=0;i<data.thirdOrder[third_1].length;i++){
                                     var third3='<input type="checkbox" name="key-service" lay-skin="primary" title="'+data.thirdOrder[third_1][i]+'">';
                                     third+=third3;
                                 }
                                 $("#keys").empty();
                                 $("#keys").append(third);
                                 form.render('checkbox');
                             }
                         }
                    })


                }
            })
});