<!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 language="javascript"> (function($) { $.fn.select_interval=function(setting){ var default1={ //默认设置 select_start_id:'', select_end_id:'', data_sourse:'' }; 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(); set.select_start_id.append($('<option value="" selected>请选择</option>')); 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){ var that = this; set.select_end_id.children().each(function(){ if(that.judge(temp_select_start_value,this)) $(this).remove(); }); } set.select_end_id.val(temp_select_end_value); }, judge:function(judge_value,opt){ return (parseInt(judge_value)>=parseInt($(opt).val()))? true :false; } }; var select_end = { init:function(){ set.select_end_id.empty(); set.select_end_id.append($('<option value="" selected>请选择</option>')); 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){ var that = this; set.select_start_id.children().each(function(){ if(that.judge(temp_select_end_value,this)) $(this).remove(); }); } set.select_start_id.val(temp_select_start_value); }, judge:function(judge_value,opt){ return (parseInt(judge_value) <= parseInt($(opt).val()))? true :false; } }; var statistics = function(){ if(''==set.select_start_id.val()){ alert('请选择开始的时间!!'); set.select_start_id.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()); } //初始化设置 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); $(function(){ var josn1 = { 'start':[{'text':'星期一','value':1}, {'text':'星期二','value':2}, {'text':'星期三','value':3}, {'text':'星期四','value':4}, {'text':'星期五','value':5}, {'text':'星期六','value':6}, {'text':'星期日','value':7} ], 'end':[ {'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 }); $('#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> </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>