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 <button id="statistics_btn">统计</button>
93 </div>
94 </body>
95 </html>
