js选择阶段性时间 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  <title>select hours interval 2</title>
 6  <SCRIPT type=text/javascript src="jquery.min.js"></SCRIPT>
 7  <script language="javascript">
 8      $(function(){
 9              var jq_hour_start_select = $('#hour_start_select');
10              var jq_hour_end_select = $('#hour_end_select');
11              //初始化
12              jq_hour_start_select_init();
13              jq_hour_end_select_init();
14              
15              $('#statistics_btn').bind("click",function(){
16                      if(''==jq_hour_start_select.val()){
17                          alert('请选择开始的时间！！');
18                          jq_hour_start_select.focus();    
19                          return;
20                      }
21                      if(''==jq_hour_end_select.val()){
22                              alert('请选择结束的时间！！');
23                              jq_hour_end_select.focus();
24                              return;    
25                      }
26                      confirm(jq_hour_start_select.val()+'---'+jq_hour_end_select.val());
27                  
28                  });
29                  jq_hour_start_select.bind('change',function(){
30                      //记录先前hour_end_select值
31                          var  hour_end_select_val = jq_hour_end_select.val();
32                          
33                          //先添加全部，再去除不符合条件的
34                              jq_hour_end_select_init();
35                              if(''!=jq_hour_start_select.val()){
36                                  jq_hour_end_select.children().each(function(){
37                                      if(parseInt(jq_hour_start_select.val())>=parseInt($(this).val())){
38                                              $(this).remove();
39                                          }        
40                                  });
41                                  
42                              }
43 
44                              //赋予先前选中的值
45                              jq_hour_end_select.val([hour_end_select_val]);
46                  });
47                  jq_hour_end_select.bind('change',function(){
48                      //记录先前hour_start_select值
49                          var  hour_start_select_val = jq_hour_start_select.val();
50                          //先添加全部，再去除不符合条件的
51                              jq_hour_start_select_init();
52                              if(''!=jq_hour_end_select.val()){
53                                  jq_hour_start_select.children().each(function(){
54                                      if(parseInt(jq_hour_end_select.val())<=parseInt($(this).val())){
55                                              $(this).remove();
56                                          }        
57                                  });
58                                  
59                              }
60                      
61                      //赋予先前选中的值
62                          jq_hour_start_select.val([hour_start_select_val]);
63                      
64                  });
65                  
66                  //结束时间初始化
67                  function jq_hour_end_select_init(){
68                      jq_hour_end_select.empty();
69                      jq_hour_end_select.append($('<option value="" selected>请选择</option>'));
70                      for(var i =13;i<25;i++ ){
71                                  jq_hour_end_select.append($('<option value='+i+'>'+i+':00</option>'));
72                      }
73                  }
74                  //开始时间初始化
75                  function jq_hour_start_select_init(){
76                      jq_hour_start_select.empty();
77                      jq_hour_start_select.append($('<option value="" selected>请选择</option>'));
78                      for(var i =1;i<13;i++ ){
79                                  jq_hour_start_select.append($('<option value='+i+'>'+i+':00</option>'));
80                      }
81                  }
82          });
83          
84      </script>
85 </head>
86 <body>
87   <div id="mode_div">
88       按天统计：
89           <select id='hour_start_select'></select>
90           至
91           <select id="hour_end_select"></select>
92           &nbsp;&nbsp;<button id="statistics_btn">统计</button>
93   </div>
94 </body>
95 </html>

 

posted @ 2016-07-13 19:58  _DongGe  阅读(487)  评论(0)    收藏  举报