layui之联立下拉框

提示：该本章主要是2个下拉框数据一对一进行联动

---

前言

提示:。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、上代码

示例：js控制代码

<script type="text/javascript">
  $(function() {
    layui.use(['layer','jquery','form'],function(){
        var layer = layui.layer,
            $ = layui.jquery;
            form = layui.form;

        var f=document.getElementById("test1");
        form.on('select(test)', function(data){
        	for(i=0;i<f.options.length;i++){
        		if(f.options[i].value==data.value){
        		    f.options[i].selected="selected";//选中
        		    form.render('select');
        		}
        	}
          console.log(data);
          console.log(data.elem); //得到select原始DOM对象
          console.log(data.value); //得到被选中的值
          console.log(data.othis); //得到美化后的DOM对象
        });
    })
   })
  </script>

<div class="layui-form-item">
    <label class="layui-form-label">实验室名称</label>
    <div class="layui-input-block">
     <select name="interest" lay-filter="test"> 
       <option value=""></option>
c:forEach var="name" items="${listT }" varStatus="status">
     <option value="${status.index+1 }">${name.getLname() }</option>
</c:forEach>
     </select>
    </div>
</div>

 <div class="layui-form-item">
                <label class="layui-form-label">实验室地点</label>
                <div class="layui-input-block">
                    <select name="interest" id="test1">
                      <option value=""></option>
                      <c:forEach var="name" items="${listT }" varStatus="status">
                         <option value="${status.index+1 }">${name.getLaddress() }</option>
                      </c:forEach>
                    </select>
              </div>
            </div>