Removing and adding parameters from a group of selected menus using jQuery

Question

It's a little trickier than the title does it, but here are the basic business rules:

• There are three highlighted menus on the screen. pages, each of which is filled with the same parameters and values.
• There will always be three menu selections.
• There will always be the same number of options / values ​​in each menu selection.
• Selecting a question from any of the menus will remove that question as an option from the other two menus.
• Re-selecting another question from any of the menus returns the question that was previously deleted from the other two menus in the index that was previously.

I tried this in several different ways, and what killed me is number 5. I know that it will not be inserted in the exact index, because some questions may have already been deleted, which will change the order of the index. This basically requires insertBefore or insertAfter, which puts it in the same "slot".

Even if you do not publish any code, some thoughts on how you could approach this would be extremely useful. The select menus and jQuery look something like this, but I have had many attempts at it in different ways:

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 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 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 name?</option>
    <option value="4">How old are you?</option>
</select>

Answer 1

Do not delete items, hide them. With removal, you cause you much 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 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');
        }
    });
});

HTML , , 0. , 1 3.

, , :

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

Answer 2

, , /. ( ). :

// 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');
            }
        });
    }
});