Disable dropdown menu

Question

I have ten drop down menu namely

<select id="dropdownmenu1">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="dropdownmenu2">
<option value="1">One</option>
<option value="2">Two</option>
</select>

an so on... My requirement is that, if the user selects any option from any dropdown then that option must be disabled in all the dropdown. For example, if the user selects Two from dropdownmenu3, then in all the dropdowns the option Two must be disabled. How do i achieve this in jquery?

Answer 1

FINAL EDIT

I added some comments to the code Here is a totally functional DEMO.

I think it does exactly what you want. When we will update a value, it will disabled it in the other selects, and the options that has to be disabled because already selected will stay (or actually re-set) disabled.

Here is the relevant JS code:

    // all the select but no current
    $selects.not($this).
        // get the options with the value of the current one
        // we ignore the value="null" bc that's "select an option"
        find('option[value='+value+']:not([value=null])').
        // disabling them
        prop('disabled','disabled');

I think that's what you need :)

---

---

previous answers

EDIT 2: Still quite simple, there are still some problems to fix, i.e, we should loop through all selects to check ether or not we should disable or not a value. Ask in a comment if you want me to show you how. Here is a working JSFiddle.

var $selects = $('select')

$selects.change(function() {
    var $self = $(this);
    var value = $self.val();
    $selects.find('option:not([value='+value+'])').removeAttr('disabled');
    $selects.not($self).find('option[value='+value+']').prop('disabled','disabled');
});

Every time a select changes, you get the selected options and set it disabled in the other selects.

var $selects = $('select')

$selects.change(function() {
    var value = $(this).val();
    $selects.find('option[value='+value+']').prop('disabled', 'disabled')
});

Edit: bug fixed and the working JSFiddle.

Answer 2

Yes i agree with @AbdulJabbar ,add a extra option to every dropdown now your html will look as shown below :

<select id="dropdownmenu1">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<select id="dropdownmenu2">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

Try This :

$('select').change(function(){
   var drop = $(this).val();
    $('select option').each(function(){
       if($(this).val() == drop && drop != "0")
       {
         $(this).attr('disabled','disabled')
       }
       else
       {
         $(this).removeAttr('disabled')
       }
    });
});

EDIT :-

DEMO

NOTE :- In this answer you can use or leave else statement(in Jquery Code) as per your requirement.

Answer 3

Here is the Short and Sweet answer,

<select id="dropdownmenu1">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu2">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu3">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu4">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

jQuery code,

$('select').change(function () {
    if ($(this).find("option:selected").val() != "0") {
        var selected = $(this).find("option:selected").text();
        $('select option:contains("' + selected + '")').attr('disabled', 'disabled');
    }
});

Demo

Answer 4

Here is.

DEMO: http://jsfiddle.net/don/0t1sm71z/

Step by step:

1. Get the value selected.
2. Use each() to check if any option has the same value.
3. Hide the values using hide() or attr('disabled', 'disabled'). And show the other values using show() or removeAttr('disabled').

CHECK DEMO: http://jsfiddle.net/don/0t1sm71z/

---

Ready HTML:

<select id="dropdownmenu1" class="dropdown">
    <option value="" selected="selected">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select id="dropdownmenu2" class="dropdown">
    <option value="" selected="selected">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Ready jQuery/Javascript:

$(document).ready(function() {
    $('.dropdown').change(function() {
        // Get the current value
        var selectedOption = $(this).val();

        // Check if any option has the same value        
        $('.dropdown option').each(function(){
            if($(this).val() == selectedOption && $(this).is(':selected') != true) {
                // If yes, hide this option
                $(this).hide();
            } else {
                // If not, show the option
                $(this).show();
            }
        });
    });
});

Answer 5

@Kartikeya's solution works well but you need to bring a slight change to your options and add an empty option at the start, because as the event listener is listening for event change and all the select options are set to one, so initially it only works when you select 'two'. I'm not saying its not right but you should try adding an empty option so that it would work when user selects one at the start as well. Just like:

<select id="dropdownmenu1">
    <option value="0"></option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

See the full demo here, using @kartikeya's logic which works fine.