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>
  11.            </select>
  12.        </div>
  13.        <div class="layui-input-inline">
  14.            <select name="cate2" id="cate2">
  15.                <option value="" selected>二级分类</option>
  16.            </select>
  17.        </div>
  18.    </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

发表评论

目前评论:1