Question

I have 4 select boxes, each containing the exact same data:

• Riding
• Fishing
• Smoking
• Flying

If I’m in select-box[0] and select “Riding”, I want to remove the option from each of the remaining except the current select-box I have active.

I’ve tried select:not(:first-child) but this will remove, only if the first child is the selection, not any of the other.

Basically, I need to remove a selected option from all drop-downs except the one I made the selection on.

Answer 1

Try this:

$('#select1').on('change', function() {
    var val = this.value;
    $('select').not(this).children().filter(function() {
        return this.value === val;
    }).remove();
});

i.e. for every <select> that is not this, get its children, but filter the ones whose .value is not the same as mine, and remove them.

Working demo at http://jsfiddle.net/alnitak/CJYWn/

If you need to re-add elements when the first entry is changed to something else, you might consider just cloning the entire first select whilst filtering out the unwanted items.

In this case the filter would need !==, since we want all of the elements except the one that matches, i.e.

$('#select1').on('change', function() {
    var val = this.value;
    $('select').not(this).empty().append($(this).children().filter(function() {
        return this.value !== val;
    }).clone());
});

working demo at http://jsfiddle.net/alnitak/ARUmX/