代碼不一定可執(zhí)行静袖，但都會展示出核心邏輯阻星。
時間下拉框的數(shù)據(jù)聯(lián)動丁侄。年份惯雳、月份和天數(shù)區(qū)間檢索
js部分代碼如下：
- 通過獲取到年、月來確定日的天數(shù)鸿摇。
- 通過選中的開始檢索天數(shù)來約定結(jié)束檢索日期可選天數(shù)吨凑。
/*select選中的值*/
var selectVal = function(id){
var selector = document.getElementById(id);
var index = selector.selectedIndex;
return selector.options[index].value;
};
/*對應(yīng)年月下的天數(shù)，并動態(tài)添加*/
/**
* id:標(biāo)簽元素
* day：對應(yīng)月份的天數(shù)
* begin:開始檢索天數(shù)
* */
var optionVal = function(id,day,beginDay){
var obj = document.getElementById(id);
var temp = 1;
/*通過beginDay參數(shù)户辱，判斷是否改變結(jié)束檢索天數(shù)*/
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));
}
};
/*主函數(shù)*/
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參數(shù)鸵钝，判斷是否改變結(jié)束檢索天數(shù)*/
if(beginDay!=undefined){
optionVal("dayEnd",day.getDate(),beginDay);
/*動態(tài)選中'dayBegin'的option. ︻︼─一為了解決調(diào)用同一個‘optionVal’導(dǎo)致的局部變量被覆蓋.！設(shè)計問題庐镐！望各位大神能提供點思路*/
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標(biāo)簽，在此展示下必逆。
<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 !!
