HTML select box, how do I move/copy selected options from one <select> to another

css-selectors, jquery, select

Solution

I managed to get it working rewriting all your code into neat one liner.

JSFiddle: (MOVE option to the other element) - http://jsfiddle.net/GJJQw/ JSFiddle: (COPY option to the other element) - http://jsfiddle.net/dEE7A/

The below code `COPIES` the select elements into the other select box.

$('[id^=\"btnRight\"]').click(function (e) {
    $(this).prev('select').find('option:selected').clone().appendTo('#isselect_code');
});

$('[id^=\"btnLeft\"]').click(function (e) {
    $(this).next('select').find('option:selected').clone().appendTo('#canselect_code');
});

If you wanted to `MOVE` (ie delete from one, and add to the other).. Use this:

$('[id^=\"btnRight\"]').click(function (e) {
    $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
});

$('[id^=\"btnLeft\"]').click(function (e) {
    $(this).next('select').find('option:selected').remove().appendTo('#canselect_code');
});

Heres a small step by step breakdown:

// the button that was clicked
$(this)

// .next('select') = get the next <select> element
.next('select').

// .find('option:selected') = get all the selected options
.find('option:selected')

// .remove() [or .clone()] = Remove or clone the found options
.remove() // OR .clone()

// .appendTo('#id-of-element') = Append the found elements to the other select box
.appendTo('#canselect_code');

So by changing the `.remove()` to `.clone()` you will COPY the option to the other select, otherwise `remove()` will remove it from this select element, and append it to the other.

Problem

I can't make this little script work: Fiddle I want to pass selected options from a Multiple Select to another using buttons. I think there is a problem with jQuery selector when trying to select all "`option:selected`". HTML : ``` <div> <select id='canselect_code' name='canselect_code' multiple> <option value='1'>toto</option> <option value='2'>titi</option> </select> <input type='button' id='btnRight_code' value=' > ' /> <br> <input type='button' id='btnLeft_code' value=' < ' /> <select id='isselect_code' name='isselect_code' multiple> <option value='3'>tata</option> <option value='4'>tutu</option> </select> </div> ``` JS ``` $('[id^=\"btnRight\"]').click(function (e) { var selectedOpts = $(this).prev('select option:selected'); if (selectedOpts.length === 0) { alert('Nothing to move.'); e.preventDefault(); } else { $(this).next('select').append($(selectedOpts).clone()); $(selectedOpts).remove(); } }); $('[id^=\"btnLeft\"]').click(function (e) { var selectedOpts = $(this).next('select option:selected'); if (selectedOpts.length === 0) { alert('Nothing to move.'); e.preventDefault(); } else { $(this).prev('select').append($(selectedOpts).clone()); $(selectedOpts).remove(); } }); ``` The "_code" mention is in my app a dynamic code, that's why i use `[^selector]` instead direct id selectors like `(#)`.

Original source