本文为博主原创，未经允许不得转载：
jQuery提供了很多很强大的事件，想要都掌握发现难度蛮大的，只有在不断的应用与实践中学习和掌握。
在做页面的时候，想做一个在选择下拉框选择值的时候，系统根据下拉框选择的值，自动触发先前定义的事件。
本想自己写一个原生的事件来实现，想起来jQuery提供了一个自动触发的事件onchange()，可以在下拉框选择的值
改变的同时，触发定义的事件。
示例如下：
要实现当下拉框中选择按月查询时，后面显示对应按月条件进行查询的按钮，
当下拉框选择按日查询时，后面显示对应按日期条件进行查询的按钮，
代码如下：
<div class="col-md-6">
<div class="form-group col-md-1"></div>
<div class="form-group col-md-2">
<div class="col-md-12">
<!--onchange="show(this.value)" 该事件对应下拉列表值，并触发show事件，对应显示在show事件中定义-->
<select id="selectCondition" class="form-control" onchange="show(this.value)" style="padding-left: 0px; padding-right: 0px; border-right-width: 0px;border-left-width: 0px;border:1px solid #ccd0d4;">
<option value="" selected="">按月查询</option>
<option value="">按日查询</option>
</select>
</div>
</div>
<!-- 按月查询div -->
<div class="col-md-9" id="monthConditionDiv">
<div class="form-group col-md-3">
<div class="col-md-12">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-white ">最近一个月</a>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-white ">三个月</a>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-white ">六个月</a>
</div>
</div>
<div class="ant-form-item-control-wrapper col-md-3 input-group">
<div class="ant-form-item-control ">
<span class="ant-calendar-picker" style="width: 100%;">
<div style="padding-top: 15px;">
<input readonly="" value="" placeholder="自定义" class="ant-calendar-picker-input ant-input" />
<span class="ant-calendar-picker-icon" style="margin-top: 0;"></span>
</div>
</span>
</div>
</div>
</div>
<!-- 按日查询div -->
<div class="col-md-9" id="dayConditionDiv" style="display:none;">
<div class="form-group col-md-3">
<div class="col-md-12">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-white ">昨日</a>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-white ">最近三天</a>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-white ">最近一周</a>
</div>
</div>
<div class="ant-form-item-control-wrapper col-md-3 input-group">
<div class="ant-form-item-control ">
<span class="ant-calendar-picker" style="width: 100%;">
<div style="padding-top: 15px;">
<input readonly="" value="" placeholder="自定义" class="ant-calendar-picker-input ant-input" />
<span class="ant-calendar-picker-icon" style="margin-top: 0;"></span>
</div>
</span>
</div>
</div>
</div> </div>
<!-- javascript 中定义show事件 -->
<script type="text/javascript">
var selectConValue = $("#selectCondition option:selected").val();
function show(flag){
if(flag==1){
$("#monthConditionDiv").hide();
$("#dayConditionDiv").show();
}
if(flag==30){
$("#monthConditionDiv").show();
$("#dayConditionDiv").hide();
}
} </script>
