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可能是您想要的，选择所选元素的所有后续兄弟。 e.g。

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

Answer 2

我想，你想这样做：

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

    //
    if($('.timepicker').find('option:selected').next()){
        $('.timepicker').find('option:selected').nextAll().clone().appendTo('.timepicker2');
    }
});

jsfiddle：http://jsfiddle.net/ashishanexpert/8ebZe/1/

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

2 个答案: