jquery 选择时间（小时）区间（二）的改造版本
源码
<!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 hours interval 3</title>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
<script language="javascript">
$(function(){
var obj_setHours ={
jq_hour_start_select : '',
jq_hour_end_select : '',
bind_ids:function(select_start_id,select_end_id){
this.jq_hour_start_select = $('#'+select_start_id);
this.jq_hour_end_select = $('#'+select_end_id);
},
//开始时间初始化
hour_start_select_init:function(){
this.jq_hour_start_select.empty();
this.jq_hour_start_select.append($('<option value="" selected>请选择</option>'));
for(var i =0;i<24;i++ ){
this.jq_hour_start_select.append($('<option value='+i+'>'+i+'时</option>'));
}
},
hour_start_select_change:function(){
//记录先前hour_end_select值
var hour_end_select_val = this.jq_hour_end_select.val();
var hour_start_select_val = this.jq_hour_start_select.val();
//先添加全部，再去除不符合条件的
this.hour_end_select_init();
if(''!=hour_start_select_val){
var that = this;
this.jq_hour_end_select.children().each(function(){
if(that.hour_start_select_change_judge(hour_start_select_val,this)){
$(this).remove();
}
});
}
//赋予先前选中的值
this.jq_hour_end_select.val([hour_end_select_val]);
},
//判断是否除去的逻辑
hour_start_select_change_judge:function(judge_val,opt){
if(parseInt(judge_val)>=parseInt($(opt).val())){
return true;
}
return false;
},
//结束时间初始化
hour_end_select_init:function(){
this.jq_hour_end_select.empty();
this.jq_hour_end_select.append($('<option value="" selected>请选择</option>'));
for(var i =1;i<25;i++ ){
this.jq_hour_end_select.append($('<option value='+i+'>'+i+'时</option>'));
}
},
hour_end_select_change:function(){
//记录先前hour_start_select值
var hour_start_select_val = this.jq_hour_start_select.val();
var hour_end_select_val = this.jq_hour_end_select.val();
//先添加全部，再去除不符合条件的
this.hour_start_select_init();
if(''!= hour_end_select_val){
var that = this;
this.jq_hour_start_select.children().each(function(){
if(that.hour_end_select_change_judge(hour_end_select_val,this)){
$(this).remove();
}
});
}
//赋予先前选中的值
this.jq_hour_start_select.val([hour_start_select_val]);
},
//判断是否除去的逻辑
hour_end_select_change_judge:function(judge_val,opt){
if(parseInt(judge_val)<=parseInt($(opt).val())){
return true;
}
return false;
},
statistics:function(){
if(''==this.jq_hour_start_select.val()){
alert('请选择开始的时间！！');
this.jq_hour_start_select.focus();
return;
}
if(''==this.jq_hour_end_select.val()){
alert('请选择结束的时间！！');
this.jq_hour_end_select.focus();
return;
}
confirm(this.jq_hour_start_select.val()+'---'+this.jq_hour_end_select.val());
}
};
obj_setHours.bind_ids('hour_start_select','hour_end_select');
obj_setHours.hour_start_select_init();
obj_setHours.hour_end_select_init();
$('#statistics_btn').bind("click",function(){
obj_setHours.statistics();
});
$('#hour_start_select').bind('change',function(){
obj_setHours.hour_start_select_change();
});
$('#hour_end_select').bind('change',function(){
obj_setHours.hour_end_select_change();
});
});
</script>
</head>
<body>
<div id="mode_div">
按天统计：
<select id='hour_start_select'></select>
至
<select id="hour_end_select"></select>
<button id="statistics_btn">统计</button>
</div>
</body>
</html>