jquery填充第二选择项目的选项大于第一选择

我一直在尝试做一个简单的下拉选择时间选择，并蹒跚地从第一个列表中选择填充第二个列表。我正在尝试开始并结束顶端下拉菜单。因此，第一次选择具有所有可用时间，第二次选择在第一次选择开始时间之后将只有可用时间。我已经能够通过简单的验证来实现它，但是这会在第二个列表中留下一天中的所有时间段，并且看起来很笨重。我想消除验证，只是在第二次选择时只提供可用的答案。现在我一直在使用的代码只是将第一个选中的副本复制到第二个。我一直在尝试添加一个比选定的多，但只是不起作用。jquery填充第二选择项目的选项大于第一选择

的.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'); 
     });

来源

2014-01-07 user1881482

我想nextAll可能是你想要什么，选择选定元素的所有后续的兄弟姐妹。例如

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

来源

2014-01-07 17:56:35

谢谢。我新增了一个简单的jquery调用。这种方法跨浏览器可以接受吗？我还添加了'$（'。timepicker2'）。empty（）;'在此之前清除第二个选择，如果第一个被重新输入。 – user1881482

没有probs。看看jQuery的bug跟踪器，看起来这应该是相当一致的跨浏览器（虽然也许不是IE7 ...！）http://bugs.jquery.com/search?q=nextall&go=&ticket=on –

还有一个问题。我计划在我的网站上为用户友好的时间/日期使用moment.js。我应该在每个时间段使用不同的值。或者你认为简单的HHMM时间结构工作正常 – user1881482

我认为，要做到这一点：

$('.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/

来源

2014-01-07 18:00:36

jquery填充第二选择项目的选项大于第一选择

回答

相关问题