layui的change监听事件
关于layui的下拉框的change监听事件
首先** 必须加上 lay-filter=“test” ， ** " " ** 中可以随便写，这里添加的是test** ，
然后下拉框如下
<label class="layui-form-label" style="line-height: 15px">统计</label>
<div class="layui-input-block">
<select name="statistics" lay-filter="test">
<option value="">---请选择---</option>
<option value ="day" >日</option>
<option value ="month" >月</option>
<option value ="year">年</option>
</select>
</div>
我这里要做的是选取一个下拉框中的信息，展示一个日期控件，选取年，展示年的日期控件，选取月和日效果一样
完整代码如下
```javascript
<div class="layui-form layui-card-header layuiadmin-card-header-auto" style="padding-bottom: 0px;padding-top: 15px">
<div class="layui-form-item">
<div class="layui-inline" style="padding-top: 5px;">
<label class="layui-form-label" style="line-height: 15px">统计</label>
<div class="layui-input-block">
<select name="statistics" lay-filter="test">
<option value="">---请选择---</option>
<option value ="day" >日</option>
<option value ="month" >月</option>
<option value ="year">年</option>
</select>
</div>
</div>
<div class="layui-inline" id="a1" style="display: none;padding-top: 5px;text-align: center">
<label class="layui-form-label" style="line-height: 15px">日(北京时间)</label>
<div class="layui-input-block" style="padding-top: 5px">
<input type="text" name="day" class="layui-input" id="test-laydate-normal-en2" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search1" id="c1" style="display: none">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
<div class="layui-inline" id="b1" style="display: none">
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search11">
<i>导出</i>
</button>
</div>
<div class="layui-inline" id="a2" style="display: none;padding-top: 5px;text-align: center;margin-right: 0px">
<label class="layui-form-label" style="line-height: 15px">月(北京时间)</label>
<div class="layui-input-inline" style="padding-top: 5px">
<input type="text" name="month" class="layui-input" id="test-laydate-type-month" placeholder="yyyy-MM">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search2" id="c2" style="display: none">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
<div class="layui-inline" id="b2" style="display: none">
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search22">
<i>导出</i>
</button>
</div>
<div class="layui-inline" id="a3" style="display: none;padding-top: 5px;text-align: center;margin-right: 0px">
<label class="layui-form-label" style="line-height: 15px">年(北京时间)</label>
<div class="layui-input-inline" style="padding-top: 5px">
<input type="text" name="year" class="layui-input" id="test-laydate-type-year" placeholder="yyyy">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search3" id="c3" style="display: none">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
<div class="layui-inline" id="b3" style="display: none">
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search33">
<i>导出</i>
</button>
</div>
</div>
</div>
然后在下面写监听
form.on('select(test)', function(data){
if(data.value == 'day'){
$("#a1").show();
$("#b1").show();
$("#c1").show();
$("#a2").hide();
$("#b2").hide();
$("#c2").hide();
$("#a3").hide();
$("#b3").hide();
$("#c3").hide();
form.render('select');
}else if(data.value=='month'){
$("#a1").hide();
$("#b1").hide();
$("#c1").hide();
$("#a2").show();
$("#b2").show();
$("#c2").show();
$("#a3").hide();
$("#c3").hide();
$("#b3").hide();
form.render('select');
}else if (data.value == 'year') {
$("#a1").hide();
$("#b1").hide();
$("#c1").hide();
$("#a2").hide();
$("#b2").hide();
$("#c2").hide();
$("#a3").show();
$("#b3").show();
$("#c3").show();
form.render('select');
}else if (data.value == '') {
$("#a1").hide();
$("#b1").hide();
$("#c1").hide();
$("#a2").hide();
$("#b2").hide();
$("#c2").hide();
$("#a3").hide();
$("#c3").hide();
$("#b3").hide();
$("#c3").hide();
form.render('select');
}
});
**form.render(‘select’);**这个一定要加
效果如下：
