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

时间：2016-09-23 21:44:49

标签： javascript html forms

我的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>

是否有任何方法可以使用户必须从ReadyTime字段中选择将来至少2小时的CloseTime文件的时间？

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

我认为这需要javascript来看看，但我根本不知道那种语言。

谢谢大家，我很感激。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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

相关问题
最新问题