Prevent Multiple Selections of Same Value

Question

I am working on a project where I have a form that will have multiple \'select\' inputs, all with the same set of options. I would like to use jquery to disable/hide an opt

Answer 1

$(document).ready(function() {
    $('#1').change(function() {
        $('option.hidden').removeClass('hidden')
        $('#2 option[value=' + $(this).val() + ']').addClass('hidden');
    });
    $('#2').change(function() {
        $('option.hidden').removeClass('hidden')
        $('#1 option[value=' + $(this).val() + ']').addClass('hidden');
    });
});

Make sure you have in css

.hidden {display:none}

Answer 2

you could do something like

var curSelected = $('#1 option:selected').val();
$('#2 option[value="'+curSelected+'"]').remove()

(of course you could directly use $(this) if you plan to add the change to the options itself through the change handler)

Of course this won't work backwards :)

In that case I suggest you to build your options directly with JavaScript so that you have the complete blueprint from which remove elements when needed, before substituting them to various select

Answer 3

This question was the top google result for searching for an answer to this, so I'll post an updated answer here. This is almost the exact same as netadictos's answer, but works for disabling and re-enabling the select values and uses prop instead of attr. Verified working in Chrome 52.

    $("select").change(function()
    {
        $("select option").prop("disabled",""); //enable everything

        //collect the values from selected;
        var  arr = $.map
        (
            $("select option:selected"), function(n)
            {
                return n.value;
            }
        );

        //disable elements
        $("select option").filter(function()
        {
            return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
        }).prop("disabled","disabled");

        //re-enable elements
        $("select option").filter(function()
        {
            return $.inArray($(this).val(),arr)==-1; //if value is not in the array of selected values
        }).prop("disabled","");
    }).trigger("change"); // Trigger the change function on page load. Useful if select values are pre-selected.

Answer 4

To hide them, use the following approach (since IE bug prevents using CSS "display" property setting to "none" on an OPTION):

-Store the original list of options in an array

-Have a function to build the select #x from an array, slipping previously selected items

-Assign an onchange handler for all selects which loops through all later selects and calls this function.

var option_value_order = {'volvo', 'saab', 'mercedes'};
var option_display_strings = new Array();
option_display_strings['volvo'] = 'Volvo'; 
//...

// Assume each of the selects' ID value is "select_1", "select_2" instead of "1", "2"
function redraw(selectNum) {
    var selectId = "select_" + selectNum;
    var s = document.getElementById(selectId);
    s.options.length = 0; // empty out
    var next = 0;
    for (var i = 0; i < option_value_order.length; i++) { 
        var skip = 0;
        for (var select_index = 0; select_index < selectNum; select_index++) {
            if (document.getElementById("select_"+select_index).selected == i)
                skip = 1;
            if (skip == 0) {
                var o = option_value_order[i];
                s.options[next] = o;
                // Don't recall how to set value different from option display, 
                // using option_display_strings[o] 
                next++;
            }
        }
    }
}

var total_selects = 2;

function change_later_selects(s) {
    var select_num = find_number(s.id); "this returns number 2 for "select_2" - homework
    for (var i = select_num + 1; i <= total_selects; i++) {
        redraw(i);
    }
}

And then the HTML

<select id="select_2" onchange="change_later_selects(this);">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

Answer 5

Here's a working example:

http://jsfiddle.net/aNxBy/

With your data, you have to do this:

$(document).ready(function() {
    $('select').change(function() {
        $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
    });
});

Be mindful, however, of the fact that this won't disable the disable after you've changed it to another value. I didn't add this in here because you didn't specify exactly what you needed to do after you disabled the option...really it could be a number of possible scenarios.

One thing you could do is to cycle through all relevant select elements when the change event fires, find the values of all the selected options, and disable where appropriate.

Answer 6

Take a look at this. It:

1. gets the ID of the dropdown you just changed
2. loops through all the select lists
3. delete the item you just selected from all the other lists