求这样一个时间选择联动效果~~

<select onchange="displaySubmenu(this.value)">
<option value="none">请选择</option>
<option value="1">年</option>
<option value="1,2">半年</option>
<option value="1,3">季度</option>
<option value="1,4">月</option>
</select>
<select id="submenu_1" name="year" style="display:none"></select>
<select id="submenu_2" name="semiyear" style="display:none"></select>
<select id="submenu_3" name="quarter" style="display:none"></select>
<select id="submenu_4" name="month" style="display:none"></select>
<script>
function hideAll(){
for(i=1;i<5;i++){
var select = document.getElementById("submenu_"+i);
while(select.options.length>0){
select.options.remove(0);
}
select.style.display = "none";
}
}function initSelect(index){
var select = document.getElementById("submenu_"+index);
var now = new Date();
var currentYear = now.getYear();
var month = now.getMonth();
switch(index){
case 1:
for(i=-5;i<=5;i++){
var value = currentYear+i;
var item = new Option(value,value);
if(i==0){
item.selected = true;
}
select.options.add(item);
}
select.style.display = "inline";
break;
case 2:
var semiyears = new Array("上半年","下半年");
for(i=0;i<2;i++){
var item = new Option(semiyears[i],i+1);
if(i==0 && month<6 || i==1 && month>5){
item.selected = true;
}
select.add(item);
}
select.style.display = "inline";
break;
case 3:
var quarters = new Array("一季度","二季度","三季度","四季度");
for(i=0;i<4;i++){
var item = new Option(quarters[i],i+1);
if(i==0 && month<3 || i==1 && month>2 && month< 6 || i==2 && month>5 && month <9 || i==3 && month>8 && month<12){
item.selected = true;
}
select.add(item);
}
select.style.display = "inline";
break;
case 4:
var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
for(i=0;i<12;i++){
var item = new Option(months[i],i+1);
if(i==month){
item.selected = true;
}
select.add(item);
}
select.style.display = "inline";
break;
default:
break;
}
}function displaySubmenu(command){
hideAll();
if(command != "none"){
var commands = command.split(",");
for(l=0;l<commands.length;l++){
initSelect(parseInt(commands[l]));
}
}
}
</script>

解决方案 »

  1.   

    有点小BUG，修正下<body>
    <select onchange="displaySubmenu(this.value)" style="float:left">
    <option value="none">请选择</option>
    <option value="1">年</option>
    <option value="1,2">半年</option>
    <option value="1,3">季度</option>
    <option value="1,4">月</option>
    </select>
    <select id="submenu_1" name="year" style="display:none;float:left"></select>
    <select id="submenu_2" name="semiyear" style="display:none;float:left"></select>
    <select id="submenu_3" name="quarter" style="display:none;float:left"></select>
    <select id="submenu_4" name="month" style="display:none;float:left"></select>
    <script>
    function hideAll(){
    for(i=1;i<5;i++){
    var select = document.getElementById("submenu_"+i);
    while(select.options.length>0){
    select.options.remove(0);
    }
    select.style.display = "none";
    }
    }function initSelect(index){
    var select = document.getElementById("submenu_"+index);
    var now = new Date();
    var currentYear = now.getYear();
    var month = now.getMonth();
    switch(index){
    case 1:
    for(i=-5;i<=5;i++){
    var value = currentYear+i;
    var item = new Option(value,value);
    select.options.add(item);
    }
    select.selectedIndex = 5;
    select.style.display = "block";
    break;
    case 2:
    var semiyears = new Array("上半年","下半年");
    for(i=0;i<2;i++){
    var item = new Option(semiyears[i],i+1);
    select.add(item);
    }
    select.selectedIndex = Math.floor(month/6);
    select.style.display = "block";
    break;
    case 3:
    var quarters = new Array("一季度","二季度","三季度","四季度");
    for(i=0;i<4;i++){
    var item = new Option(quarters[i],i+1);
    select.add(item);
    }
    select.selectedIndex = Math.floor(month/3);
    select.style.display = "block";
    break;
    case 4:
    var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
    for(i=0;i<12;i++){
    var item = new Option(months[i],i+1);
    select.add(item);
    }
    select.selectedIndex = month;
    select.style.display = "block";
    break;
    default:
    break;
    }
    }function displaySubmenu(command){
    hideAll();
    if(command != "none"){
    var commands = command.split(",");
    for(l=0;l<commands.length;l++){
    initSelect(parseInt(commands[l]));
    }
    }
    }
    </script>
    </body>
      

  2.   

    哇噻~~
    要的就是这个效果啊，谢谢老兄啦，马上散分！不知道我应该如何去取出select里面的值呢？
      

  3.   

    Click the link to solve your problem.Good luck!