用插件的形式编写升级版 jquery_select_interval.js 源码

Posted 2020-06-08

/* * 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>