Отключенная опция из поля выбора, если она уже выбрана

Question

У меня есть table с id = fields-list и внутри этого table 4 блока выбора с тем же классом db-list. Теперь я хочу, если option в первом select выбран, отключить этот option в остальной части selectbox

<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, поскольку таблица должна содержать 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 не должно быть одинаковых value в одном select option.