代码不一定可执行，但都会展示出核心逻辑。
时间下拉框的数据联动。年份、月份和天数区间检索
js部分代码如下：
- 通过获取到年、月来确定日的天数。
- 通过选中的开始检索天数来约定结束检索日期可选天数。
/*select选中的值*/
var selectVal = function(id){
var selector = document.getElementById(id);
var index = selector.selectedIndex;
return selector.options[index].value;
};
/*对应年月下的天数，并动态添加*/
/**
* id:标签元素
* day：对应月份的天数
* begin:开始检索天数
* */
var optionVal = function(id,day,beginDay){
var obj = document.getElementById(id);
var temp = 1;
/*通过beginDay参数，判断是否改变结束检索天数*/
if(beginDay!=undefined)
temp = beginDay;
obj.options.length=0;
obj.options.add(new Option("请选择",-1));
for(var i=temp;i<=day;i++){
obj.options.add(new Option(i+"日",i));
}
};
/*主函数*/
function getDay(year,month,beginDay){
var yearTemp = year || selectVal("year");
var monthTemp = month || selectVal("month");
var day = new Date(yearTemp,monthTemp,0);
optionVal("dayBegin",day.getDate());
optionVal("dayEnd",day.getDate());
/*通过beginDay参数，判断是否改变结束检索天数*/
if(beginDay!=undefined){
optionVal("dayEnd",day.getDate(),beginDay);
/*动态选中'dayBegin'的option. ︻︼─一为了解决调用同一个‘optionVal’导致的局部变量被覆盖.！设计问题！望各位大神能提供点思路*/
var dayBegin = document.getElementById("dayBegin");
for(var j=1;j<dayBegin.options.length;j++){
if(dayBegin.options[j].value===beginDay){
dayBegin.options[j].selected = true;
break;
}
}
}
};
html代码就不用多说了，就4个select标签，在此展示下。
<select name="year" id="year" class="form-control" onchange="getDay(this.value,null)">
<select name="month" id="month" class="form-control" onchange="getDay(null,this.value)">
<select name="dayBegin" id="dayBegin" class="form-control" onchange="getDay(null,null,this.value)">
<select name="dayEnd" id="dayEnd" class="form-control">
Happy Learning !!
