JS下拉框数据联动实现example

代码不一定可执行，但都会展示出核心逻辑。

时间下拉框的数据联动。年份、月份和天数区间检索

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 !!