jquery 选择时间（小时）区间（一）
- select hours interval 选择时间区间
- 开始时间须小于结束时间
- 开始时间选定后，结束时间自动变更取值范围
- 结束时间选定后，开始时间自动变更取值范围
源码
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>select hours1</title> <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT> <script language="javascript"> $(function(){ var jq_hour_start_select = $('#hour_start_select'); var jq_hour_end_select = $('#hour_end_select'); $('#statistics_btn').bind("click",function(){ if(''==jq_hour_start_select.val()){ alert('请选择开始的时间！！'); jq_hour_start_select.focus(); return; } if(''==jq_hour_end_select.val()){ alert('请选择结束的时间！！'); jq_hour_end_select.focus(); return; } confirm(jq_hour_start_select.val()+'---'+jq_hour_end_select.val()); }); jq_hour_start_select.bind('change',function(){ //记录先前hour_end_select值 var hour_end_select_val = jq_hour_end_select.val(); // 先清空，再添加符合条件的 if(''!=jq_hour_start_select.val()){ jq_hour_end_select.empty(); jq_hour_end_select.append($('<option value="">请选择</option>')); for(var i=parseInt(jq_hour_start_select.val())+1;i<25;i++ ){ jq_hour_end_select.append($('<option value='+i+'>'+i+'时</option>')); } } //赋予先前选中的值 jq_hour_end_select.val([hour_end_select_val]); }); jq_hour_end_select.bind('change',function(){ //记录先前hour_start_select值 var hour_start_select_val = jq_hour_start_select.val(); // 先清空，再添加符合条件的 if(''!=jq_hour_end_select.val()){ jq_hour_start_select.empty(); jq_hour_start_select.append($('<option value="">请选择</option>')); for(var i=0;i < parseInt(jq_hour_end_select.val());i++ ){ jq_hour_start_select.append($('<option value='+i+'>'+i+'时</option>')); } } //赋予先前选中的值 jq_hour_start_select.val([hour_start_select_val]); }); }); </script> </head> <body> <div id="mode_div"> 按天统计： <select id='hour_start_select'> <option value=''>请选择</option> <option value='0'>0时</option> <option value='1'>1时</option> <option value='2'>2时</option> <option value='3'>3时</option> <option value='4'>4时</option> <option value='5'>5时</option> <option value='6'>6时</option> <option value='7'>7时</option> <option value='8'>8时</option> <option value='9'>9时</option> <option value='10'>10时</option> <option value='11'>11时</option> <option value='12'>12时</option> <option value='13'>13时</option> <option value='14'>14时</option> <option value='15'>15时</option> <option value='16'>16时</option> <option value='17'>17时</option> <option value='18'>18时</option> <option value='19'>19时</option> <option value='20'>20时</option> <option value='21'>21时</option> <option value='22'>22时</option> <option value='23'>23时</option> </select> 至 <select id="hour_end_select"> <option value=''>请选择</option> <option value='1'>1时</option> <option value='2'>2时</option> <option value='3'>3时</option> <option value='4'>4时</option> <option value='5'>5时</option> <option value='6'>6时</option> <option value='7'>7时</option> <option value='8'>8时</option> <option value='9'>9时</option> <option value='10'>10时</option> <option value='11'>11时</option> <option value='12'>12时</option> <option value='13'>13时</option> <option value='14'>14时</option> <option value='15'>15时</option> <option value='16'>16时</option> <option value='17'>17时</option> <option value='18'>18时</option> <option value='19'>19时</option> <option value='20'>20时</option> <option value='21'>21时</option> <option value='22'>22时</option> <option value='23'>23时</option> <option value='24'>24时</option> </select> <button id="statistics_btn">统计</button> </div> </body> </html>
演示
按天统计： 至
