JQuery根據另一個選項禁用下拉選項

Question

我有兩個下拉列表。每個包含相同的時間列表。當選擇列表「A」中的時間時，我想在列表「B」中禁用相同的以及之前的所有時間。

List A     List B 
------     ------ 
06:00 AM     06:00 AM 
07:00 AM     07:00 AM 
08:00 AM     08:00 AM 
...      ... 

所以，當有人點擊發言權名單「A」，到時候和以前列表「B」上午07:00將被禁用。

$('#listA').on('change', function(){ 
    ... 
}); 

用於經濟編碼的+1。

UPDATE

最後我做這裏面捕捉這兩種方法：

function setDisableOptions(from, to) { 
    $(document.body).on('change', '[name="' + from + '"]', function() { 
     var s = $(this).prop('selectedIndex') + 1; 
     var l = $('[name="' + from + '"] option').length; 
     $(this).find('option').prop('disabled', false); 
     for (var i = 0; i <= l; i++) { 
      if (i <= s) { 
       $('[name="' + to + '"] > option:nth-child(' + i + ')').attr('disabled', 'disabled'); 
      } else { 
       $('[name="' + to + '"] > option:nth-child(' + i + ')').removeAttr('disabled'); 
      } 
     } 
    }); 
    $(document.body).on('change', '[name="' + to + '"]', function() { 
     var s = $(this).prop('selectedIndex') + 1; 
     var l = $('[name="' + to + '"] option').length; 
     $(this).find('option').prop('disabled', false); 
     for (var i = 0; i <= l; i++) { 
      if (i >= s) { 
       $('[name="' + from + '"] > option:nth-child(' + i + ')').attr('disabled', 'disabled'); 
      } else { 
       $('[name="' + from + '"] > option:nth-child(' + i + ')').removeAttr('disabled'); 
      } 
     } 
    }); 
}; 

被稱爲像：

setDisableOptions('fromInputName', 'toInputName'); 

Answer 1

這是（從代碼編輯）這樣做的更好，優雅的方式

$('select').change(function() { 
 
    var s = $(this).prop('selectedIndex')+1; 
 
    var selected = $(this); 
 
    var fcontrol = function() { 
 
     if (selected.attr('id') == 'listA') { 
 
     \t return $(this).index()+1 < s; 
 
     } else { 
 
     \t return $(this).index()+1 > s; 
 
     }; 
 
    } 
 
    var others = $(this).siblings('select').children() 
 
    others.prop('disabled', false).filter(fcontrol).prop('disabled', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="listA" size="5"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
    <option>Four</option> 
 
    <option>Five</option> 
 
</select> 
 
<select id="listB" size="5"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
    <option>Four</option> 
 
    <option>Five</option> 
 
</select>

Answer 2

這可能有助於

$('#listA').on('change', function(){ 
 
\t var s = $(this).prop('selectedIndex')+1; 
 
\t var l = $("#listA option").length; 
 
\t for(var i = 0; i <= l; i++){ 
 
\t \t if(i <= s) { 
 
\t \t \t $("#listB > option:nth-child(" + i + ")").attr('disabled','disabled'); 
 
\t \t } else { 
 
\t \t \t $("#listB > option:nth-child(" + i + ")").removeAttr('disabled'); 
 
\t \t } 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="listA" name="sometext" size="5"> 
 
    <option>text1</option> 
 
    <option>text2</option> 
 
    <option>text3</option> 
 
    <option>text4</option> 
 
    <option>text5</option> 
 
</select> 
 
<select id="listB" name="sometext" size="5"> 
 
    <option>text1</option> 
 
    <option>text2</option> 
 
    <option>text3</option> 
 
    <option>text4</option> 
 
    <option>text5</option> 
 
</select>