1. 首頁
  2. 問答
  3. 基於另一個選擇字段在html選擇字段中隱藏條目

基於另一個選擇字段在html選擇字段中隱藏條目

2016-09-23 305 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

相關問題

 相關問題