jquery 选择时间（小时）区间（二）

  • select hours interval 选择时间区间

　　完成jquery 选择时间（小时）区间（一）中同样的功能

　　源码

　　

View Code 
<!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=gbk" />
 <title>select hours interval 2</title>
 <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
 <script language="javascript">
     $(function(){
             var jq_hour_start_select = $('#hour_start_select');
             var jq_hour_end_select = $('#hour_end_select');
             //初始化
             jq_hour_start_select_init();
             jq_hour_end_select_init();
             
             $('#statistics_btn').bind("click",function(){
                     if(''==jq_hour_start_select.val()){
                         alert('请选择开始的时间！！');
                         jq_hour_start_select.focus();    
                         return;
                     }
                     if(''==jq_hour_end_select.val()){
                             alert('请选择结束的时间！！');
                             jq_hour_end_select.focus();
                             return;    
                     }
                     confirm(jq_hour_start_select.val()+'---'+jq_hour_end_select.val());
                 
                 });
                 jq_hour_start_select.bind('change',function(){
                     //记录先前hour_end_select值
                         var  hour_end_select_val = jq_hour_end_select.val();
                         
                         //先添加全部，再去除不符合条件的
                             jq_hour_end_select_init();
                             if(''!=jq_hour_start_select.val()){
                                 jq_hour_end_select.children().each(function(){
                                     if(parseInt(jq_hour_start_select.val())>=parseInt($(this).val())){
                                             $(this).remove();
                                         }        
                                 });
                                 
                             }

                             //赋予先前选中的值
                             jq_hour_end_select.val([hour_end_select_val]);
                 });
                 jq_hour_end_select.bind('change',function(){
                     //记录先前hour_start_select值
                         var  hour_start_select_val = jq_hour_start_select.val();
                         //先添加全部，再去除不符合条件的
                             jq_hour_start_select_init();
                             if(''!=jq_hour_end_select.val()){
                                 jq_hour_start_select.children().each(function(){
                                     if(parseInt(jq_hour_end_select.val())<=parseInt($(this).val())){
                                             $(this).remove();
                                         }        
                                 });
                                 
                             }
                     
                     //赋予先前选中的值
                         jq_hour_start_select.val([hour_start_select_val]);
                     
                 });
                 
                 //结束时间初始化
                 function jq_hour_end_select_init(){
                     jq_hour_end_select.empty();
                     jq_hour_end_select.append($('<option value="" selected>请选择</option>'));
                     for(var i =1;i<25;i++ ){
                                 jq_hour_end_select.append($('<option value='+i+'>'+i+'时</option>'));
                     }
                 }
                 //开始时间初始化
                 function jq_hour_start_select_init(){
                     jq_hour_start_select.empty();
                     jq_hour_start_select.append($('<option value="" selected>请选择</option>'));
                     for(var i =0;i<24;i++ ){
                                 jq_hour_start_select.append($('<option value='+i+'>'+i+'时</option>'));
                     }
                 }
         });
         
     </script>
</head>
<body>
  <div id="mode_div">
      按天统计：
          <select id='hour_start_select'></select>
          至
          <select id="hour_end_select"></select>
          &nbsp;&nbsp;<button id="statistics_btn">统计</button>
  </div>
</body>
</html>

 

　　演示

按天统计： 至   
posted @ 2012-05-17 11:22  shuaisam  阅读(3310)  评论(0)  编辑  收藏  举报