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