jquery 选择时间（小时）区间（五）
用插件的形式编写升级版
jquery_select_interval.js 源码
/* * 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);
plugin.html 源码
<!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>
