從屬組合框

Question

在網頁上，我有兩個組合框。第一個從上午9點到晚上9點的開始時間（小時）。第二個從上午10點到下午12點結束。

用戶選擇開始時間和結束時間。

我希望能夠讓第二個組合框僅顯示晚於第一個框中選擇的那個時間的那些時間。

例如，如果用戶選擇了2pm的開始時間，則第二個組合框僅顯示包括下午3點之後的時間。

我絕對不知道如何去做這件事，我甚至不知道它可以做到。

這是我現在的代碼。

<div class="form-group"> 
<label class="control-label col-sm-3" for="bookingTime">Times of your booking</label> 
<div class="col-sm-4"> 
<select class="form-control" name="bookingStartTime" id="bookingStartTime"> 
    <option>Select start time</option> 
    <option value="9am">9 am</option> 
    <option value="10am">10 am</option> 
    <option value="11am">11 am</option> 
    <option value="12pm">12 pm</option> 
    <option value="1pm">1 pm</option> 
    <option value="2pm">2 pm</option> 
    <option value="3pm">3 pm</option> 
    <option value="4pm">4 pm</option> 
    <option value="5pm">5 pm</option> 
    <option value="6pm">6 pm</option> 
    <option value="7pm">7 pm</option> 
    <option value="8pm">8 pm</option> 
    <option value="9pm">9 pm</option> 
</select> 
</div> 
<!-- /#bookingStartTime --> 

<div class="col-sm-offset-1 col-sm-4"> 
<select class="form-control" name="bookingEndTime" id="bookingEndTime"> 
    <option>Select finish time</option> 
    <option value="10am">10 am</option> 
    <option value="11am">11 am</option> 
    <option value="12pm">12 pm</option> 
    <option value="1pm">1 pm</option> 
    <option value="2pm">2 pm</option> 
    <option value="3pm">3 pm</option> 
    <option value="4pm">4 pm</option> 
    <option value="5pm">5 pm</option> 
    <option value="6pm">6 pm</option> 
    <option value="7pm">7 pm</option> 
    <option value="8pm">8 pm</option> 
    <option value="9pm">9 pm</option> 
    <option value="10pm">10 pm</option> 
    <option value="11pm">11 pm</option> 
    <option value="12pm">12 pm</option> 
</select> 
</div>   
<!-- /bookingEndTime --> 

Answer 1

任何事情都是可能的軟件的神奇世界，不僅能不能做到，但也有實現它的許多不同的方式。

這裏是一個粗略的例子： https://jsfiddle.net/n6fm39ww/

HTML

<select name="start_time"> 
</select> 

<select name="end_time"> 
    <option value="default">Pick a start time</option> 
</select> 

JS

// Add each option to start_times 
for (var hour = 9; hour <= 21; hour++) { 
    var option = "<option value='"+hour+"'>"+hour+"</option>"; 
    $('[name="start_time"]').append(option); 
} 

// When the start time is changed, set the end time 
$('[name="start_time"]').on('change', function() { 
    // This is the start time chosen 
    var start_time = $(this).val(); 
    // Remove the default option 
    $('[name="end_time"]').find('option').remove(); 
    // Add options after the start time 
    for (var hour = parseInt(start_time) + 1; hour <= 24; hour++) { 
     var option = "<option value='"+hour+"'>"+hour+"</option>"; 
    $('[name="end_time"]').append(option); 
    } 
}); 

Answer 2

請務必在將來提供代碼示例。

這裏是如何做到這一點的例子：https://jsfiddle.net/c6432wee/

---

假設我們有兩個選擇。

<select id="startTime"> <option value="na">Please Select A Time</option> <option value=1>1:00PM</option> </select>

<select id="endTime"> <option value="na">Please Select A Time</option> <option value=1>1:00PM</option> </select>

我們通過設置隱藏

$('#endTime').css('display', 'none');

然後我們註冊事件處理結束時啓動。每當它發生變化時，我們都會查看它的值是否與我們的默認佔位符不同。

$('#startTime').change(function() { 
    if($('#startTime').val() !== 'na') { 
     $('#endTime').css('display', 'initial'); 
    } 
    }); 

如果是，我們將endTime設置回其初始顯示狀態。

$('#endTime').css('display', 'initial');