如果已選擇，則選擇框中的禁用選項

Question

我有一個 id = fields-list的table ，並且在這個table 4選擇框具有相同的類db-list 。 現在我想如果option了第一個select的option在select框的其余部分禁用此option

<table id="fields-list" class="table table-hover">
   <select class="form-control db-list" >
       <option value="">All</option>
       <option value="d">1</option>
       <option value="t">2</option>
       <option value="t">3</option>
       <option value="h">4</option>
   </select>
   <select class="form-control db-list" >
       <option value="">All</option>
       <option value="d">1</option>
       <option value="t">2</option>
       <option value="t">3</option>
       <option value="h">4</option>
   </select>
</table>

我試過這樣：

$('.db-list').on('change', function () {
  if( $('#fields-list').find('select option[value='+$(this).val()+']:selected').length>1){
      $(this).val($(this).find("option:first").val()).prop('disabled', true);
  }           
});

但不工作。 你能幫我嗎 ？ 提前感謝並為我的英語感到抱歉。

需要如何工作的情況： 1.首先選擇選擇選項1（頁面中的所有選擇框都應禁用選項1）； 2.第二次選擇選擇選項3（頁面中的所有選擇框應禁用上一個選擇的選項3+選項1） 3.首先選擇選擇選項4（現在所有選擇框應禁用選項4+選項3並啟用選項1）

Answer 1

1. table應該更改為其他內容，例如div ，因為 table 應該包含thead 、 tbody或tr

2. 這一行：

   $(this).val($(this).find("option:first").val()).prop('disabled', true);

將禁用選擇，但不是選項，所以試試這個：

$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);

工作示例

 $('.db-list').on('focus', function () { var ddl = $(this); ddl.data('previous', ddl.val()); }).on('change', function () { var ddl = $(this); var previous = ddl.data('previous'); ddl.data('previous', ddl.val()); if (previous) { $('#fields-list').find('select option[value='+previous+']').removeAttr('disabled'); } $('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fields-list" class="table table-hover"> <select class="form-control db-list" > <option value="">All</option> <option value="d">1</option> <option value="t">2</option> <option value="t">3</option> <option value="h">4</option> </select> <select class="form-control db-list" > <option value="">All</option> <option value="d">1</option> <option value="t">2</option> <option value="t">3</option> <option value="h">4</option> </select> </div>

Answer 2

您可以使用 .filter() 獲取具有相似值的選項

$('select').on('change', function() {
    $('option').prop('disabled', false);
    $('select').each(function() {
        var val = this.value;
        $('select').not(this).find('option').filter(function() {
            return this.value === val;
        }).prop('disabled', true);
    });
}).change();

Answer 3

$('.db-list:first').on('change', function () {
    // enable all first
    $('.db-list:last option').prop('disabled', false);

    // disable the selected value
    $('.db-list:last option[value="'+ $(this).val() +'"]').prop('disabled', true);    

});

順便說一句， option在一個select option不應具有相同的value 。