CODEWITHSUNDEEP
javascriptjqueryhtml
Stan
Stan

Reputation: 26511

Remove selected items from other select inputs

I have a problem with select input items.

What I want to achieve is dynamically remove already selected options from other select boxes so that I cannot select same item on multiple boxes. The problem is that elements are loaded in array via AJAX and I need to fill the select input with options after. This makes it so much harder.

In short - How can I make sure that if I select one item in select it will be deleted on all others, but when I select something else the previous item will be shown again and so on...

I have a fiddle as well, this is how far I got: http://jsfiddle.net/P3j4L/

Upvotes: 0

Views: 1080

Answers (1)

Diode
Diode

Reputation: 25145

You can try something like this

function updateSelects()
{
  $('.selectContainer .select').each(
    function (i, elem)
    {
        // Get the currently selected value of this select
        var $selected = $(elem).find("option:selected"); 
        // Temp element for keeping options
        var $opts = $("<div>");
        // Loop the elements array
        for (i = 0; i < selectElements.length; i++)
        {
            var value = selectElements[i];
            // Check if the value has been selected in any select element
            if ($selected.val() == value || !$('.select option[value=' + value + ']:selected').length)
            {
                 // if not create an option and append to temp element
                 $opts.append('<option value="' + value + '">' + value + '</option>');
            }
        }
        // replace the html of select with new options
        $(elem).html($opts.html());
        if ($selected.length)
        {
             // set the selected value if there is one
             $(elem).val($selected.val());
        }
        else
        {
             // new select element. So remove its selected option from all other selects
             $('.selectContainer .select').not(this).find('option[value=' + $(elem).val() + ']').remove();
        }
    }
  );
}

see a demo here : http://jsfiddle.net/P3j4L/1/

Upvotes: 3

Related Questions