layui和js实现二级联动

先上效果图

1、默认情况

2、选择 一级分类 后

如选择 Java，则在二级分类中只显示Java的子分类

同样，如果选择的是 计算机科学，在二级分类中只显示其子分类

二、代码实现

1、layui 的代码

class="layui-form-item">
       class="layui-form-label">分类
       class="layui-input-inline">
           "cate1" id="cate1" lay-filter="cate1" required>
               "" selected="">一级分类
               "${categoryCustomList}" var="c">
                   if test="${c.categoryPid==0}">
                       "${c.categoryId}">${c.categoryName}
                   if>

       class="layui-input-inline">

           "cate2" id="cate2">

               "" selected>二级分类

           

       

   

博主这里用的是 springmvc，一级分类只需要输出父分类即可。子分类暂时为空，待会儿通过 js 输出即可。

其中的 ${categoryCustomList} 是控制器向页面传送的，这里就不介绍了。

 

2、js 代码

//二级联动
     form.on("select(cate1)",function () {
         var optionstring = "";
         var cate1 = $("#cate1").val();
         "${categoryCustomList}" var="c">
             if(cate1==${c.categoryPid}) {
                 optionstring += "${c.categoryName}";
             }

         $("#cate2").html("  二级分类"+optionstring);
         form.render('select'); //这个很重要
     })

因为博主这里使用的是 layui 的框架，所以对表单操作需要用 layui 封装的方法。如果大家没有用 layui，可以直接 $("#cate1").change(...) 这样写。获取分类列表，可以直接用后台传过来的数据，循环输出的话，也可以使用 jQuery 的each 遍历。

 

这里就不介绍 SpringMVC 的代码了，相信大家很熟悉了。

 

本文地址：https://liuyanzhao.com/6262.html