In JQuery, how do I copy a subset of select options from one select menu to another?

Question

I'm using JQuery 1.11.1. I have two select menu elements, one containing options like

<select id="select1">
    <option value="A">option A</option>
    <option value="B">option B</option>
    ...
    <option value="">=============</option>
    <option value="AA">option AA</option>
    <option value="BB">option BB</option>
    ...
</select>

How do I copy the options up to and including the option with the "=============" text to the second select menu (let's say the second select menu has id='select2').

Thanks, - Dave

score 2 · Accepted Answer · answered Jan 16 '15 at 20:02

var option, count = -1;
while ((option = $('#select1 option')[++count]).value != "")
{
  $(option).clone().appendTo('#select2');
}
$($('#select1 option')[count]).clone().appendTo('#select2'); //for the '=====' one

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
    <option value="A">option A</option>
    <option value="B">option B</option>
    <option value="">=============</option>
    <option value="AA">option AA</option>
    <option value="BB">option BB</option>
</select>

<select id="select2">
</select>

Not related to the actual approach, just a few comments on optimization and readability. You should really cache that jquery object instead of re-querying the DOM on every iteration of the loop. You could also consider using jquery's `.eq` to get the element instead of unwrapping and re-wrapping the elements. — James Montagne, Jan 16 '15 at 20:37

Inanda Menezes · Answer 2 · 2015-01-16T20:32:07.900

0

First solution:

You can do it this way:

var emptyOption = $("#select1 option").filter(function() {
                     return $.trim( $(this).val() ) == '';
                  });
var $options = emptyOption.prevAll().addBack().clone();
$('#select2').append($options);

JSFiddle: http://jsfiddle.net/inanda/uosvokdr/2/

Second solution:

If you can add a class to the options you want to copy, you can do it the following way.

HTML

<select id="select1">
    <option value="A" class="copy">option A</option>
    <option value="B" class="copy">option B</option>

    <option value="" class="copy">=============</option>
    <option value="AA">option AA</option>
    <option value="BB">option BB</option>

</select>

<select id="select2">
</select>

Javascript:

var $options = $("#select1 > option.copy").clone();

$('#select2').append($options);

Working JsFiddle: http://jsfiddle.net/inanda/m2qd177u/1/

edited Jan 16 '15 at 20:32

answered Jan 16 '15 at 20:02

Inanda Menezes

1,796
13
17

Good start but you left out the `` – j08691 Jan 16 '15 at 20:24
You shouldn't use `andSelf` as it has been deprecated as of 1.8. You should use `addBack` which is the replacement and works the same. You can also simplify your initial line to just `var emptyOption = $("#select1 option[value='']");` and eliminate the need for `filter` (though this won't handler the `trim` you have added to yours) – James Montagne Jan 16 '15 at 20:31
Yep, that's why I added the filter. I don't know how he is creating this HTML. Better to prevent issues in the case that I don't know. But if you are sure it's never gonna need the trim, then it would be simpler. – Inanda Menezes Jan 16 '15 at 20:36

In JQuery, how do I copy a subset of select options from one select menu to another?

2 Answers2