layui和js实现二级联动

先上效果图

1、默认情况

2、选择 一级分类 后

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

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

二、代码实现

1、layui 的代码

1. <div class="layui-form-item">
2.        <label class="layui-form-label">分类</label>
3.        <div class="layui-input-inline">
4.            <select name="cate1" id="cate1" lay-filter="cate1" required>
5.                <option value="" selected="">一级分类</option>
6.                <c:forEach items="${categoryCustomList}" var="c">
7.                    <c:if test="${c.categoryPid==0}">
8.                        <option value="${c.categoryId}">${c.categoryName}</option>
9.                    </c:if>
10.                </c:forEach>
12.            </select>
13.        </div>
14.        <div class="layui-input-inline">
15.            <select name="cate2" id="cate2">
16.                <option value="" selected>二级分类</option>
17.            </select>
18.        </div>
19.    </div>

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

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

 

2、js 代码

1. //二级联动
2.      form.on("select(cate1)",function () {
3.          var optionstring = "";
4.          var cate1 = $("#cate1").val();
5.          <c:forEach items="${categoryCustomList}" var="c">
6.              if(cate1==${c.categoryPid}) {
7.                  optionstring += "<option name='cate2' value='${c.categoryId}'>${c.categoryName}</option>";
8.              }
9.          </c:forEach>
10.          $("#cate2").html("  <option value=''selected>二级分类</option>"+optionstring);
11.          form.render('select'); //这个很重要
12.      })

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

 

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

 

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