先上效果图
1、默认情况
2、选择 一级分类 后
如选择 Java，则在二级分类中只显示Java的子分类
同样，如果选择的是 计算机科学，在二级分类中只显示其子分类
二、代码实现
1、layui 的代码
- <div class="layui-form-item">
- <label class="layui-form-label">分类</label>
- <div class="layui-input-inline">
- <select name="cate1" id="cate1" lay-filter="cate1" required>
- <option value="" selected="">一级分类</option>
- <c:forEach items="${categoryCustomList}" var="c">
- <c:if test="${c.categoryPid==0}">
- <option value="${c.categoryId}">${c.categoryName}</option>
- </c:if>
- </c:forEach>
- </select>
- </div>
- <div class="layui-input-inline">
- <select name="cate2" id="cate2">
- <option value="" selected>二级分类</option>
- </select>
- </div>
- </div>
博主这里用的是 springmvc，一级分类只需要输出父分类即可。子分类暂时为空，待会儿通过 js 输出即可。
其中的 ${categoryCustomList} 是控制器向页面传送的，这里就不介绍了。
2、js 代码
- //二级联动
- form.on("select(cate1)",function () {
- var optionstring = "";
- var cate1 = $("#cate1").val();
- <c:forEach items="${categoryCustomList}" var="c">
- if(cate1==${c.categoryPid}) {
- optionstring += "<option name='cate2' value='${c.categoryId}'>${c.categoryName}</option>";
- }
- </c:forEach>
- $("#cate2").html(" <option value=''selected>二级分类</option>"+optionstring);
- form.render('select'); //这个很重要
- })
因为博主这里使用的是 layui 的框架，所以对表单操作需要用 layui 封装的方法。如果大家没有用 layui，可以直接 $("#cate1").change(...) 这样写。获取分类列表，可以直接用后台传过来的数据，循环输出的话，也可以使用 jQuery 的each 遍历。
这里就不介绍 SpringMVC 的代码了，相信大家很熟悉了。
本文地址：https://liuyanzhao.com/6262.html
- 微信
- 交流学习，资料分享
-
- 个人淘宝
- 店铺名：言曌博客咨询部
-
(部分商品未及时上架淘宝)
2019年06月20日 12:35:41
在freemarker中的ftl文件中也能这么用ma