Disabled option from select box if already selected

Question

I have a table with id = fields-list and inside this table 4 select box with the same class db-list . Now I want if the option in first select is selected disable this option in the rest of 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>

I tried like this :

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

But not work. Can you help me please ? Thx in advance and sorry for my english.

Situations how need to work : 1. First Select choose option 1 (all select box from the page should disable option 1); 2. Second Select choose option 3 (all select box from the page should disable option 3 + option 1 from previous selectd) 3. First Select choose option 4 (now all select box should disable option 4 + option 3 and enable option 1)

Answer 1

1. table should be changed to something else, div for example, because table should contain thead , tbody or tr

2. this line:

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

will disable select, but not option, so try this:

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

working example

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

You can use .filter() to get options with a similar value

$('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);    

});

And by the way, option 's shouldn't have the same value in one select option .