下拉框二级联查

挑选第一个下拉框，选定内容后通过ajax访问后台，查出对应的数据填充到第二个下拉框里

html代码：

<div class="layui-inline">
        <label class="layui-form-label" style="width: 80px;">事业部</label>
           <div class="layui-input-inline">
            <select id="business" name="business" class="layui-input" lay-filter="changeBusiness">
              <option value="">-请选择事业部-</option>
              <c:forEach items="${business}" var="item">
                <option value="${item.key}" ${item.key eq fcHydrant.business?'selected':''}>${item.value}</option>
              </c:forEach>
            </select>
            </div>
      </div>
         <div class="layui-inline">
        <label class="layui-form-label" style="width: 80px;">管理单位</label>
          <div class="layui-input-inline">
            <select id="manaUnit" name="manaUnit" class="layui-input" lay-search="">
              <option value="">-请先选择事业部-</option>
            </select>
            </div>
      </div>

js代码：

 1 function renderForm(){
 2       layui.use('form', function(){
 3        var form = layui.form;
 4        form.render();
 5       });
 6 }
 7 
 8 form.on('select(changeBusiness)', function(data){
 9      var value = $("#business").val();
10      changeUnit(value);
11 }); 
12 
13 function changeUnit(business){
14      $.ajax({
15             async:false,
16             url: '${ctx}/fcHydrant/getUnitByBusiness',
17             data:{"business": business},
18             contentType: 'application/json',
19             dataType: 'json',
20             success: function(msg){
21                 var json = msg;
22                 if (json != null) {
23                     $('#manaUnit').empty();
24                     $('#manaUnit').append('<option value="">-请选择部门-</option>');
25                     for( var key in json ){
26                         $('#manaUnit').append("<option value="+key+">"+json[key]+"</option>");
27                     }
28                 }
29             }
30         });
31     renderForm();
32 }

java代码：

 1 @ResponseBody
 2     @RequestMapping(value = "/getUnitByBusiness")
 3     public String getUnitByBusiness(String business) {
 4         Gson gson = new Gson();
 5         String json = StringUtils.EMPTY;
 6         try {
 7             Map<String, Object> depts = fcHydrantService.getUnitByBusiness(business);
 8             json = gson.toJson(depts);
 9         } catch (Exception e) {
10             log.error(e.getMessage(), e);
11         }
12         return json;
13     }

上述代码解释：

  1. 首先通过layer监听lay-filter="changeBusiness"的select框，当该select发生改变时，获取select框的值作为参数调用changeUnit 方法。
  2. changeUnit 里通过ajax访问后台方法getUnitByBusiness。
  3. 该后台方法将查出来的map数据转化成json格式数据返回给前台。
  4. 在js里ajax访问执行成功的回调方法为在id='manaUnit'的select框后添加option列表（每次添加option时都会清空先前的option），renderForm为刷新页面。
posted @ 2020-01-09 14:27  leviH  阅读(427)  评论(0)  编辑  收藏  举报