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填充第二選擇項目的選項大於第一選擇

回答

相關問題