layui和js实现二级联动

avatar 2017年09月18日10:49:53 6 14866 views
博主分享免费Java教学视频，B站账号：Java刘哥

先上效果图

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
历史上的今天
九月
18日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：1   待审核评论数：0
  1. avatar 西红柿炒土豆
    回复 2019年06月20日 12:35:41

    在freemarker中的ftl文件中也能这么用ma