javascript - Jquery 使用大于第一个选择的选项填充第二个选择项

Question

我一直在尝试为时间选择做一个简单的下拉选择，但在用第一个列表中的选项填充第二个列表时遇到了麻烦。我正在尝试制作一个开始和结束的顶部下拉菜单。所以第一个选择有所有可用时间，第二个选择只有在第一个选择开始时间之后可用的时间。我已经能够通过简单的验证让它工作，但是这留下了一天中所有时间段的第二个列表并且看起来很笨重。我想消除验证并仅在第二个选择中提供可用的答案。现在我一直在使用的代码只是将第一个选择复制到第二个。我一直在尝试以某种方式添加大于选择的值，但就是行不通。

.html

<select class="form-control timepicker required" id="firstTime" >
    <option value="700">7:00am</option><option value="715">7:15am</option><option value="730">7:30am</option><option value="745">7:45am</option>
    <option value="800">8:00am</option><option value="815">8:15am</option><option value="830">8:30am</option><option value="845">8:45am</option>
    <option value="900">9:00am</option><option value="915">9:15am</option><option value="930">9:30am</option><option value="945">9:45am</option>
    <option value="1000">10:00am</option><option value="1015">10:15am</option><option value="1030">10:30am</option><option value="1045">10:45am</option>
    <option value="1100">11:00am</option><option value="1115">11:15am</option><option value="1130">11:30am</option><option value="1145">11:45am</option>
    <option value="1200">12:00pm</option><option value="1215">12:15pm</option><option value="1230">12:30pm</option><option value="1245">12:45pm</option>
    <option value="1300">1:00pm</option><option value="1315">1:15pm</option><option value="1330">1:30pm</option><option value="1345">1:45pm</option>
    <option value="1400">2:00pm</option><option value="1415">2:15pm</option><option value="1430">2:30pm</option><option value="1445">2:45pm</option>
    <option value="1500">3:00pm</option><option value="1515">3:15pm</option><option value="1530">3:30pm</option><option value="1545">3:45pm</option>
    <option value="1600">4:00pm</option><option value="1615">4:15pm</option><option value="1630">4:30pm</option><option value="1645">4:45pm</option>
    <option value="1700">5:00pm</option><option value="1715">5:15pm</option><option value="1730">5:30pm</option><option value="1745">5:45pm</option>
    <option value="1800">6:00pm</option><option value="1815">6:15pm</option><option value="1830">6:30pm</option><option value="1845">6:45pm</option>
    <option value="1900">7:00pm</option><option value="1915">7:15pm</option><option value="1930">7:30pm</option><option value="1945">7:45pm</option>
    <option value="2000">8:00pm</option><option value="2015">8:15pm</option><option value="2030">8:30pm</option><option value="2045">8:45pm</option>
    <option value="2100">9:00pm</option><option value="2115">9:15pm</option><option value="2130">9:30pm</option><option value="2145">9:45pm</option>

</select>

.js

$('.timepicker').change(function() {
            $('.timepicker').find('option:selected')
            .clone().appendTo('.timepicker2');
        });

Answer 1

我认为 nextAll 可能是您想要的，以选择所选元素的所有后续兄弟。例如

$('.timepicker').find('option:selected').nextAll()
.clone().appendTo('.timepicker2');