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>

          &nbsp;&nbsp;<button id="statistics_btn">统计</button>

  </div>

</body>

</html>