/* * select_interval 0.1
* Copyright (c) 2012 shuaisam http://shuaisam.cnblogs.com/
* Date: 2012-06-04
* Desc: 提供时间的选择区间，用josn数据初始化
* select_start_id 开始时间的id
* select_end_id 结束时间的id
* data_sourse josn数据源 格式如var josn1 = {'start':[ ],'end':[ ]};
* select_start_judge 选中的开始时间与结束时间选项比较函数
* select_end_judge 选中的结束时间与开始时间选项比较函数
*/
(function($) {
$.fn.select_interval=function(setting){
var default1={
//默认设置
select_start_id:'',
select_end_id:'',
data_sourse:'',
select_start_judge:function(select_start_value,select_end_opt_value){
return false;
},
select_end_judge:function(select_end_value,select_start_opt_value){
return false;
}
};
var set = $.extend({},default1,setting);
//将字符串转化为jquery对象
set.select_start_id = (typeof set.select_start_id == 'string' ? $('#'+set.select_start_id) : set.select_start_id);
set.select_end_id = (typeof set.select_end_id == 'string' ? $('#'+set.select_end_id) : set.select_end_id);
var select_start = {
init:function(){
set.select_start_id.empty();
for(var i = 0; i <set.data_sourse.start.length;i++){
$('<option></option>').text(set.data_sourse.start[i].text)
.val(set.data_sourse.start[i].value)
.appendTo(set.select_start_id);
}
},
change:function(){
var temp_select_start_value = set.select_start_id.val();
var temp_select_end_value = set.select_end_id.val();
select_end.init();
if (''!= temp_select_start_value){
set.select_end_id.children().each(function(){
if(set.select_start_judge(temp_select_start_value,$(this).val())) $(this).remove();
});
}
set.select_end_id.val(temp_select_end_value);
}
};
var select_end = {
init:function(){
set.select_end_id.empty();
for(var i = 0; i <set.data_sourse.end.length;i++){
$('<option></option>').text(set.data_sourse.end[i].text).val(set.data_sourse.end[i].value).appendTo(set.select_end_id);
}
},
change:function(){
var temp_select_start_value = set.select_start_id.val();
var temp_select_end_value = set.select_end_id.val();
select_start.init();
if (''!= temp_select_end_value){
set.select_start_id.children().each(function(){
if(set.select_end_judge(temp_select_end_value,$(this).val())) $(this).remove();
});
}
set.select_start_id.val(temp_select_start_value);
}
};
//初始化设置
select_start.init();
select_end.init();
set.select_start_id.bind('change',function(){ select_start.change();});
set.select_end_id.bind('change',function(){ select_end.change(); });
};
})(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=utf-8" />
<title></title>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../scripts/jquery_select_interval.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
var josn1 = {
'start':[
{'text':'--请选择--','value':''},
{'text':'星期一','value':1},
{'text':'星期二','value':2},
{'text':'星期三','value':3},
{'text':'星期四','value':4},
{'text':'星期五','value':5},
{'text':'星期六','value':6},
{'text':'星期日','value':7}
],
'end':[
{'text':'--请选择--','value':''},
{'text':'星期一','value':1},
{'text':'星期二','value':2},
{'text':'星期三','value':3},
{'text':'星期四','value':4},
{'text':'星期五','value':5},
{'text':'星期六','value':6},
{'text':'星期日','value':7}
]
};
$.fn.select_interval({
select_start_id:'hour_start_select',
select_end_id:'hour_end_select',
data_sourse:josn1,
select_start_judge:function(select_start_value,select_end_opt_value){
return (parseInt(select_start_value)>=parseInt(select_end_opt_value))? true :false;
},
select_end_judge:function(select_end_value,select_start_opt_value){
return (parseInt(select_end_value) <= parseInt(select_start_opt_value))? true :false;
}
});
$('#statistics_btn').bind('click', function(){
if(''==$('#hour_start_select').val()){
alert('请选择开始的时间！！');
$('#hour_start_select').focus();
return;
}
if(''==$('#hour_end_select').val()){
alert('请选择结束的时间！！');
$('#hour_end_select').focus();
return;
}
confirm($('#hour_start_select').val()+'---'+$('#hour_end_select').val());
});
});
</script>
<style type='text/css'>
body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;}
div{
font-size:12px
}
div span{
color:#6D93AB;
font-size:14px;
}
.select{
color:#79A2BD;
}
</style>
</head>
<body>
<div id="mode_div">
<span >按天统计：</span>
<select id='hour_start_select' class='select'></select>
至
<select id="hour_end_select" class='select'></select>
<button id="statistics_btn">统计</button>
</div>
</body>
</html>