Removing and adding options from a group of select menus with jQuery

Question

This is a little more complicated than the title makes it out to be, but here are the essential business rules:

1. There are three select menus on the page, each filled with the same options and values.
2. There will always be three select menus.
3. There will always be the same number of options/values in each select menu.
4. Selecting a question in any of the menus will remove that question as an option from the other two menus.
5. Re-selecting a different question from any of the menus will bring back the question that was previously removed from the other two menus at the index it was at previously.

I've tried this a few different ways, and the thing that is killing me is number 5. I know that it wouldn't be inserted at the exact index because some questions may have already been removed, which would reorder the index. It basically needs an insertBefore or insertAfter that puts it in the same "slot".

Even if you don't post any code, some thoughts on how you might approach this would be extremely helpful. The select menus and jQuery look something like this, but I've had numerous tries at it in different variations:

jQuery:

$(function() {
    $(".questions").change(function() {
        var t = this;
        var s = $(t).find(":selected");

        // Remove, but no "insert previously selected" yet...

        $(".questions").each(function(i) {
            if (t != this) {
                $(this).find("option[value=" + s.val() + "]").remove();
            }
        });
    });
});

HTML:

<select name="select1" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>
<select name="select2" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>
<select name="select3" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>

Answer 1

Don't remove the elements, hide them. With removing, you are causing you a lot more problems than necessary. This works for me:

$(function() {
    $('select.questions').change(function() {            
        var hidden = [];
        // Get the values that should be hidden
        $('select.questions').each(function() {
            var val = $(this).find('option:selected').val();
            if(val > 0) {
                hidden.push($(this).find('option:selected').val());
            }
        });
        // Show all options...          
        $('select.questions option').show().removeAttr('disabled');            
        // ...and hide those that should be invisible
        for(var i in hidden) {
            // Note the not(':selected'); we don't want to hide the option from where
            // it's active. The hidden option should also be disabled to prevent it
            // from submitting accidentally (just in case).
            $('select.questions option[value='+hidden[i]+']')
                .not(':selected')
                .hide()
                .attr('disabled', 'disabled');
        }
    });
});

I made a small change to your HTML also, I denoted an option that should always be visible with a value of 0. So the valid options go from 1 to 3.

Here's a working example, tell me if I misunderstood you:

http://www.ulmanen.fi/stuff/selecthide.php

Answer 2

I was working on a solution of this recently and modified this code to remove rather than disable/hide. For my solution it was required (I'm also using UI to style the select elements). Here's how I did it:

// Copy an existing select element
var cloned = $('select[name="select1"]').clone();

// Each time someone changes a select
$('select.questions').live('change',function() {
    // Get the current values, then reset the selects to their original state
    var hidden[];
    $('select.questions').each(function() {
        hidden.push($(this).val());
        $(this).html(cloned.html());
    });
    // Look through the selects
    for (var i in hidden) {
        $('select.questions').each(function() {
            // If this is not the current select
            if ((parseInt(i)) != $(this).parent().index()) {
                // Remove the ones that were selected elsewhere
                $(this).find('option[value="'+hidden[i]+'"]').not('option[value="0"]').remove();
            } else {
                // Otherwise, just select the right one
                $(this).find('option[value="'+hidden[i]+'"]').not('option[value="0"]').attr('selected','selected');
            }
        });
    }
});