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

javascript, jquery, select

Solution

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

Problem

This is a little more complicated than the title makes it out to be, but here are the essential business rules: - There are three select menus on the page, each filled with the same options and values. - There will always be three select menus. - There will always be the same number of options/values in each select menu. - Selecting a question in any of the menus will remove that question as an option from the other two menus. - 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> ```

Original source