1. 首页
  2. 问答
  3. 基于另一个选择字段在html选择字段中隐藏条目

基于另一个选择字段在html选择字段中隐藏条目

2016-09-23 319 views
0

我在我的html表单中有2个选择字段。一个是拿起准备好的时间，一个是最近的取货时间。基于另一个选择字段在html选择字段中隐藏条目

<label>What is the earliest Pickup time?</label><select name='PickupTime' required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='08:00:00'>8:00 AM</option> 
    <option value='08:30:00'>8:30 AM</option> 
    <option value='09:00:00'>9:00 AM</option> 
    <option value='09:30:00'>9:30 AM</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
</select> 
<label>What is the latest Pickup time?</label><select name='CloseTime' required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
    <option value='14:30:00'>2:30 PM</option> 
    <option value='15:00:00'>3:00 PM</option> 
    <option value='15:30:00'>3:30 PM</option> 
    <option value='16:00:00'>4:00 PM</option> 
    <option value='16:30:00'>4:30 PM</option> 
</select>

有没有什么办法让这个用户有选择的CloseTime文件，是至少2小时，未来从ReadyTime领域的时间？

因此，如果用户选择了上午11点的准备时间，那么closetime字段中的时间将从下午1点开始（但仍然只能到4:30）。

我认为这需要从环顾四周的JavaScript，但我根本不知道这种语言。

谢谢大家，我很感激。

来源

2016-09-23 rudtek

回答

1 
<label>What is the earliest Pickup time?</label> 
<select name='PickupTime' onChange="updateCloseTime(this)" required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='08:00:00'>8:00 AM</option> 
    <option value='08:30:00'>8:30 AM</option> 
    <option value='09:00:00'>9:00 AM</option> 
    <option value='09:30:00'>9:30 AM</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
</select> 
<label>What is the latest Pickup time?</label> 
<select name='CloseTime' id="CloseTime" required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
    <option value='14:30:00'>2:30 PM</option> 
    <option value='15:00:00'>3:00 PM</option> 
    <option value='15:30:00'>3:30 PM</option> 
    <option value='16:00:00'>4:00 PM</option> 
    <option value='16:30:00'>4:30 PM</option> 
</select> 

<script> 
    function updateCloseTime(PickupTime) { 
    var PickupTimeValueSplit = PickupTime.value.split(":"); 
    PickupTimeValueSplit[0] = Number(PickupTimeValueSplit[0]) + 2; 
    var valueToFind = PickupTimeValueSplit.join(":"); 
    var selectCloseTime = document.getElementById("CloseTime"); 
    var optionsList = Array.prototype.slice.call(selectCloseTime.options); 
    optionsList.forEach(function(element, index, array) { 
     if (element.value) { 
     if (Number(element.value.replace(/:/g,"")) < Number(valueToFind.replace(/:/g,""))) { 
      selectCloseTime.options[index].style.display = 'none'; 
     } 
     else { 
      selectCloseTime.options[index].style.display = 'block'; 
     } 
     } 
    }); 

    } 

</script>

来源

2016-09-23 22:54:56

+0

谢谢谢谢谢谢谢谢！ – rudtek

+0

不客气:) –

+0

好，让它更复杂。有什么方法可以添加到第一个字段，他们不能选择一个在他们电脑当前时间之前的时间？如果你想让我问一个单独的问题并通知你，我可以，让我知道。再次感谢。 – rudtek

1

我已经为你制作了这段JavaScript代码，并试图很好地评论它，因为你说你是初学者。

//This function is called when the user chooses an option in the first form 
 
function adjustForm(selectForm){ 
 
    
 
    //Get the value of the chosen option 
 
    var optValue = selectForm.options[selectForm.selectedIndex].value; 
 
    
 
    //Failsafe 
 
    if(optValue == ""){return;} 
 
    
 
    //Get array of options from second form 
 
    var opts = document.getElementById("closeTime").options; 
 

 
    //Iterate through every option from second form 
 
    for(var opt, j = 0; opt = opts[j]; j++) { 
 
    
 
    //Failsafe 
 
    if(opt.value != ""){ 
 
    
 
     //And test them against the chosen option from form 1 
 
     if(parseInt(opt.value.match(/^0?(\d{1,2}):/)[1]) < parseInt(optValue.match(/^0?(\d{1,2}):/)[1]) + 2) { 
 
     
 
     //If they match, the option is deleted 
 
     document.getElementById("closeTime").remove(j); 
 
     
 
     j -= 1; 
 
     } 
 
    
 
    } 
 
    
 
    } 
 
}
<label>What is the earliest Pickup time? </label><select id="pickupTime" name='PickupTime' onchange="adjustForm(this);" required> 
 
    <option value='' selected='selected'>(Select a Time)</option> 
 
    <option value='08:00:00'>8:00 AM</option> 
 
    <option value='08:30:00'>8:30 AM</option> 
 
    <option value='09:00:00'>9:00 AM</option> 
 
    <option value='09:30:00'>9:30 AM</option> 
 
    <option value='10:00:00'>10:00 AM</option> 
 
    <option value='10:30:00'>10:30 AM</option> 
 
    <option value='11:00:00'>11:00 AM</option> 
 
    <option value='11:30:00'>11:30 AM</option> 
 
    <option value='12:00:00'>12:00 PM</option> 
 
    <option value='12:30:00'>12:30 PM</option> 
 
    <option value='13:00:00'>1:00 PM</option> 
 
    <option value='13:30:00'>1:30 PM</option> 
 
    <option value='14:00:00'>2:00 PM</option> 
 
</select> 
 
<label><br><br>What is the latest Pickup time? </label><select id="closeTime" name='CloseTime' required> 
 
    <option value='' selected='selected'>(Select a Time)</option> 
 
    <option value='10:00:00'>10:00 AM</option> 
 
    <option value='10:30:00'>10:30 AM</option> 
 
    <option value='11:00:00'>11:00 AM</option> 
 
    <option value='11:30:00'>11:30 AM</option> 
 
    <option value='12:00:00'>12:00 PM</option> 
 
    <option value='12:30:00'>12:30 PM</option> 
 
    <option value='13:00:00'>1:00 PM</option> 
 
    <option value='13:30:00'>1:30 PM</option> 
 
    <option value='14:00:00'>2:00 PM</option> 
 
    <option value='14:30:00'>2:30 PM</option> 
 
    <option value='15:00:00'>3:00 PM</option> 
 
    <option value='15:30:00'>3:30 PM</option> 
 
    <option value='16:00:00'>4:00 PM</option> 
 
    <option value='16:30:00'>4:30 PM</option> 
 
</select>

脚本只是获取在pickupTime选择的选项的时间。然后它得到closeTime中每个选项的小时，并开始单独测试它们，小时为pickupTime小时，以查看它们是否小于pickupTime小时。如果它们较小，则意味着它们应该从选项中删除。

我可以想象if(parseInt(opt.value.match(/^0?(\d{1,2}):/)[1]) <= parseInt(optValue.match(/^0?(\d{1,2}):/)[1]) + 2)这条线对你来说是最难理解的。真的，它只是从选项中获取值，并将它们转换为我们可用于逻辑测试的数字。

它需要像这样：

09:30:00

而且把它变成这样：

9

如果你想知道我不知道你知道所有的乱码手段（正则表达式是什么是），this website应该解释这一点。

否则，请知道这个脚本只是为了引导你在正确的方向。我已经可以识别它的两个大缺陷：

1） 当JavaScript删除选项时，它无法取回它们。因此，如果用户首先在晚上选择了一段时间，但后来改变了主意，并且选择了更早的时间，JavaScript将已经删除了迟到的选项，并且无法将它们还原。所以你将不得不在其他地方存储不同的选项，所以JavaScript可以记住它们，并在需要时再插入它们。

2） 现在，JavaScript只会查看小时。这意味着您可以选择4:30作为pickupTime，然后仍以6:00作为closeTime选项。也许这对你无关紧要，但如果这样做，你将不得不做更多的正则表达式魔法来包含分钟，或者将它们转换为时间戳，然后进行比较。

我希望这对你有所帮助：D

来源

2016-09-24 00:13:10

+0

如此清晰，深思熟虑！谢谢！我会试试看看我得到了什么。谢谢你的细节，我真的很感激他们。 – rudtek

相关问题

 相关问题