Question

I’m trying to add items to a select element from another select element, but only if they are not already present:

$('#srcSelect option:selected').appendTo('#dstSelect')

The only problem with this is that I want the item in #srcSelect to be skipped if the same value already is present in #dstSelect. Or to put it another way, the values in #dstSelect should be unique.

What’s the most succint way to make it so using jQuery?

Answer 1

My solution would be to use the .filter to filter the list of selected items to only those that don’t exist in the second select:

$('#srcSelect option:selected').filter(function() {
    return $('#dstSelect option[value="' + $(this).attr('value') + '"]').length == 0;
}).appendTo('#dstSelect')

I assumed you are using a <select multiple="multiple"> otherwise there are easier ways

Here the JSFiddle: http://jsfiddle.net/43P7M/1/

greetings Daniel