求这样一个时间选择联动效果~解决方法
日期：2014-05-16 浏览次数：20369 次
求这样一个时间选择联动效果~~
现在需要做一个select选框，里面可以选择不同的时间频度，包括年，月，季度，半年，
选择年的时候，右侧就会出来年度选择的select，默认显示当前年，
选择月的时候，右侧就会出来年度选择和月度选择的select，每人显示当前年和当前月，
选择季度的时候，右侧就会出来年度选择和季度选择的select，默认显示当前年和当前季度，
选择半年的时候，右侧就会出来年度选择和半年选择的selcet，默认显示当前年和当前所在半年，
不知道这样的一个组合的时间频度选择能实现么？
哪位高手能写个客户端的出来啊，应该在很多地方都可以用到的。
------解决方案--------------------
有点小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>
现在需要做一个select选框，里面可以选择不同的时间频度，包括年，月，季度，半年，
选择年的时候，右侧就会出来年度选择的select，默认显示当前年，
选择月的时候，右侧就会出来年度选择和月度选择的select，每人显示当前年和当前月，
选择季度的时候，右侧就会出来年度选择和季度选择的select，默认显示当前年和当前季度，
选择半年的时候，右侧就会出来年度选择和半年选择的selcet，默认显示当前年和当前所在半年，
不知道这样的一个组合的时间频度选择能实现么？
哪位高手能写个客户端的出来啊，应该在很多地方都可以用到的。
------解决方案--------------------
有点小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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
