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 option in the rest of the 'select' inputs, if it has already been selected.

For example:

<select id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

<select id="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

The user chooses 'Volvo' on the first select. I would like it removed from the second select.

Any info would be greatly appreciated.

Answer 1

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 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

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 4

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

Answer 5

Here there is the code to continue selecting and disabling all the times we want.

First thing is to enable every option, and then look at the selected values, and disable the options which coincides with the selected values.

These 2 steps are crucial because if you select again, the disabled values of before would continue disabled.

NEWEST VERSION

The more elegant way, where we use map() (in stackoverflow there is a good explanation about this method) and filter() jquery functions to do the job. Less lines, and I think same performance or better.

http://www.jsfiddle.net/dactivo/keDDr/

$("select").change(function()
 {

        $("select option").attr("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
     }).attr("disabled","disabled");   

});

NEW VERSION

I have edited my answer, this is my final version:

http://www.jsfiddle.net/dactivo/kNbWc/

$("select").change(function()
                   {

        $("select option").attr("disabled",""); //enable everything
        DisableOptions(); //disable selected values

                   });


function DisableOptions()
{
    var arr=[];
      $("select option:selected").each(function()
              {
                  arr.push($(this).val());
              });

    $("select option").filter(function()
        {

              return $.inArray($(this).val(),arr)>-1;
   }).attr("disabled","disabled");   

}

OLD VERSION

http://www.jsfiddle.net/AyxL3/

$("select").change(function()
                   {

        $("select option").attr("disabled",""); //enable everything
        DisableOptions(); //disable selected values

                   });


function DisableOptions()
{

    $("select option").filter(function()
        {
              var bSuccess=false; //will be our flag to know it coincides with selected value
              var selectedEl=$(this);
              $("select option:selected").each(function()
              {

                  if($(this).val()==selectedEl.val())
                  {
                       bSuccess=true; //it coincides we will return true;
                       return false; // this serves to break the each loop
                   }               

              });
              return bSuccess;
   }).attr("disabled","disabled");   

}

Answer 6

$(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}