Question

在我写的代码中，我有两个主要目标。第一个是确定用户工作的小时数，另一个是建立加班工作。现在您可以在下面的代码中看到，用户可以选择何时工作。

现在的问题是：如何让我的加班字段动态隐藏不相关的小时数？

如果用户从07:00到17:00工作。我希望他能够在加时赛中的那些时间之间做出选择。我知道我需要使用jquery，但更多的具体指南将不胜感激代码如下：

<tr >
                    <td>From:</td>
                    <td>
                        H:<select name="from_hour" id="from_hour">
                            <option value='0'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                 </select>
                        M:<select name="from_minute" id="from_minute">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>
                    <td>To:</td>
                    <td>
                        H:<select name="to_hour" id="to_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                    </select>
                        M:<select name="to_minute" id="to_minute">
                            <option value='00'>00</option><option value='05'>05</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                    </select>
                    </td>
                </tr>

加班代码：

<tr id="test_ovt">
                    <td>From:</td>
                    <td >
                        H:<select name="ovt_f_hour" id="ovt_f_hour">
                            <option value='0'>0</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                  </select>
                        M:<select name="ovt_f_min" id="ovt_f_min">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>

                <td >To:</td>
                    <td >
                        H:<select name="ovt_t_hour" id="ovt_t_hour">
                            <option value='0'>0</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                  </select>
                        M:<select name="ovt_t_min" id="ovt_t_min">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>



                </tr>

另一个例子包括：

如果X先生从凌晨03:00到下午16:00完成工作，他想填写加班费。加班费字段只能显示从03:00到16:00的值。

原因是：如果它不属于他在工作的from和to字段中列出的值之间，他就无法指定他已经工作的加班。

Answer 1

请您查看下面的代码段：

$(document).ready(function(){
  
	var from_hour = $("#from_hour");
	var from_minute = $("#from_minute");
	var to_hour = $("#to_hour");
	var to_minute = $("#to_minute");

	var ovt_f_hour = $("#ovt_f_hour");
	var ovt_f_min = $("#ovt_f_min");
	var ovt_t_hour = $("#ovt_t_hour");
	var ovt_t_min = $("#ovt_t_min");

	$(from_hour).on("change",function(){
		var curr_from_hour = $(this).val();
        $(ovt_f_hour).val(curr_from_hour);
		curr_from_hour = parseInt(curr_from_hour);
       $(ovt_f_hour).find("option").prop("disabled",false).removeClass("disabled");
		$(ovt_f_hour).find("option").each(function(){
			if(parseInt($(this).val())<curr_from_hour)
				$(this).prop("disabled",true).addClass("disabled");
		});
      
	});
	
	$(to_hour).on("change",function(){
		var curr_to_hour = $(this).val();
        $(ovt_t_hour).val("00");
		curr_to_hour = parseInt(curr_to_hour);
	   $(ovt_t_hour).find("option").prop("disabled",false).removeClass("disabled");
		$(ovt_t_hour).find("option").each(function(){
			if(parseInt($(this).val())>curr_to_hour)
				$(this).prop("disabled",true).addClass("disabled");
		});	
	});
	
	$(from_minute).on("change",function(){
		var curr_from_minute = $(this).val();
        $(ovt_f_min).val(curr_from_minute);
		curr_from_minute = parseInt(curr_from_minute);
		$(ovt_f_min).find("option").prop("disabled",false).removeClass("disabled");
		$(ovt_f_min).find("option").each(function(){
			if(parseInt($(this).val())<curr_from_minute)
				$(this).prop("disabled",true).addClass("disabled");
		});	
	});

	$(to_minute).on("change",function(){
		var curr_to_minute = $(this).val();
        $(ovt_t_min).val("00");
		curr_to_minute = parseInt(curr_to_minute);
		$(ovt_t_min).find("option").prop("disabled",false).removeClass("disabled");
		$(ovt_t_min).find("option").each(function(){
			if(parseInt($(this).val())>curr_to_minute)
				$(this).prop("disabled",true).addClass("disabled");
		});	
	});
	
})

.disabled{
  background-color:"#ccc";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<table>
  <tr >
                    <td>Work From:</td>
                    <td>
                        H:<select name="from_hour" id="from_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                 </select>
                        M:<select name="from_minute" id="from_minute">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>
                    <td>To:</td>
                    <td>
                        H:<select name="to_hour" id="to_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                    </select>
                        M:<select name="to_minute" id="to_minute">
                            <option value='00'>00</option><option value='05'>05</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                    </select>
                    </td>
                </tr>
  
  
  <tr id="test_ovt">
                    <td>Overtime From:</td>
                    <td >
                        H:<select name="ovt_f_hour" id="ovt_f_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                  </select>
                        M:<select name="ovt_f_min" id="ovt_f_min">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>

                <td >To:</td>
                    <td >
                        H:<select name="ovt_t_hour" id="ovt_t_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                  </select>
                        M:<select name="ovt_t_min" id="ovt_t_min">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>



                </tr>
  
</table>

Answer 2

<h1>Worked Hours</h1>

<br />
<tr id="worked_hours" >
                    <td>From:</td>
                    <td>
                        H:<select name="from_hour" id="from_hour">
                            <option value='0'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                 </select>
                        M:<select name="from_minute" id="from_minute">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>
                    <td>To:</td>
                    <td>
                        H:<select name="to_hour" id="to_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                    </select>
                        M:<select name="to_minute" id="to_minute">
                            <option value='00'>00</option><option value='05'>05</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                    </select>
                    </td>
                </tr>
<br />
<br />
<h1>Overtime Hours</h1>
<tr id="test_ovt">
                    <td>From:</td>
                    <td >
                        H:<select name="ovt_f_hour" id="ovt_f_hour">
                            <option value='0'>0</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                  </select>
                        M:<select name="ovt_f_min" id="ovt_f_min">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>

                <td >To:</td>
                    <td >
                        H:<select name="ovt_t_hour" id="ovt_t_hour">
                            <option value='0'>0</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                  </select>
                        M:<select name="ovt_t_min" id="ovt_t_min">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>



                </tr>

代码

var items=  $('#ovt_f_hour')[0].options;
var overtimeHour = 15;
$.each(items,function(i,v){
        if(i<=overtimeHour){
        $(v).prop("disabled","disabled").css("background-color","#ccc")
        }
    });

Jquery的

$('#to_hour').on("change",function(){
var items=  $('#ovt_f_hour')[0].options;


var start_overtimeHour = $('#from_hour option:selected').text();
var end_overtime= $('#to_hour option:selected').text();
$.each(items,function(i,v){
        if(i>=start_overtimeHour&&i<=end_overtime){     
        }else{
        $(v).prop("disabled","disabled").css("background-color","#ccc");
        }
    });

var items1=  $('#ovt_t_hour')[0].options;

$.each(items1,function(i,v){
        if(i>=start_overtimeHour&&i<=end_overtime){     
        }else{
        $(v).prop("disabled","disabled").css("background-color","#ccc");
        }
    });
});

Fiddle

根据先前的输入隐藏表单中的动态字段值

2 个答案:

代码

Jquery的