Using JQuery to add selected items from one combobox to another

Question

I'm trying to find the best way to add selected items from one combobox to another. The trick is I only want to add items to the destination list that don't already exist. Currently the process I use is rather ugly and does not work as I would expect.

$('#addSelectedButton').click(function() {
    var previousOption;
    $('#sourceList option:selected').appendTo('#destinationList');
    $('select[name=destinationList] option').each(function () {
        if (this.text == previousOption) $(this).remove();
        previousOption = this.text;
    });
});

The problem I'm having is that the appendTo method acts as more of a move rather than an add. Then there's the problem of removing the duplicates, which works in this this example, but I can't help but think there's a better way.

Any assistance would be greatly appreciated.

Thanks,

Duplicate of [How to append one jQuery element already in the DOM to another element?](/q/6364633/4642212). — Sebastian Simon, Nov 20 '22 at 05:39

hunter · Accepted Answer · 2011-09-27T14:31:37.523

using clone() and grep() you can achieve this easily. First clone the options that are selected from the source and then using grep you can filter out the items that are already in the destination list.

$('#addSelectedButton').click(function() {
    // select this once into a variable to minimize re-selecting
    var $destinationList = $('#destinationList');

    // clone all selected items
    var $items = $.grep($('#sourceList option:selected').clone(), function(v){
        // if the item does not exist return true which includes it in the new array
        return $destinationList.find("option[value='" + $(v).val() + "']").length == 0;

    });

    // append the collection to the destination list
    $destinationList.append($items);
});

Working Example: http://jsfiddle.net/hunter/4GK9A/

clone()

Create a deep copy of the set of matched elements.

grep()

Finds the elements of an array which satisfy a filter function. The original array is not affected.

Nice use of grep! Forgot about that one. – rooney Sep 27 '11 at 14:40 — rooney, Sep 27 '11 at 14:40

score 1 · Answer 2 · answered Sep 27 '11 at 14:23

1

I think what you want is to use "clone" in conjunction with append:

http://api.jquery.com/clone/

answered Sep 27 '11 at 14:23

Nate

386
3
4

score 1 · Answer 3 · answered Sep 27 '11 at 14:27

You could use clone() like this:

$('#addSelectedButton').click(function() {
    var previousOption;
    var clone =  $('#sourceList option:selected').clone();
    clone.appendTo('#destinationList');
    $('select[name=destinationList] option').each(function () {
        if (this.text == previousOption) $(this).remove();
        previousOption = this.text;
    });
});

score 1 · Answer 4 · answered Sep 27 '11 at 14:38

You can just search the destination list for the containing value. http://jsfiddle.net/EHqem/

$('#addSelectedButton').click(function() {
    $('#sourceList option:selected').each(function(i, el) {
        if ($('#destinationList option[value='+$(el).val()+']').length === 0) {
           $('#destinationList').append($(el).clone());
        }
    });
});

Using JQuery to add selected items from one combobox to another

4 Answers4