CODEWITHSUNDEEP
javascriptjqueryjquery-ui
GPiter
GPiter

Reputation: 799

Disabled option from select box if already selected

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)

Upvotes: 2

Views: 3861

Answers (3)

TRD-Warren
TRD-Warren

Reputation: 367

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

Upvotes: 0

qiAlex
qiAlex

Reputation: 4346

  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>

Upvotes: 1

Robert Bisschop
Robert Bisschop

Reputation: 139

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

Upvotes: 2

Related Questions