如何将<option>从一个<select>复制到另一个？

我正在使用http://www.stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.html中find的双面多选，并且需要将选中的选项添加到右手多选中，并使用JQuery将其选中。 有没有人不得不这样做，知道这样做的快速方法？

var selectedOptions = $("#myselect")[0].options; 将获得选项，但如何写这些到其他select？

Answer 1

 var $options = $("#myselect > option").clone(); $('#secondSelectId').append($options); 

现场演示

Answer 2

 <select multiple="true" class="multiselect1" name="myselecttsms1"> <option value="1" rel="0" title="One">One</option> <option value="2" rel="1" title="Two">Two</option> <option value="4" rel="3" title="Four">Four</option> <option value="5" rel="4" title="Five">Five</option> <option value="6" rel="5" title="Six">Six</option> </select> <select multiple="true" class="multiselect2" name="myselecttsms2" size="6"> </select> <button class="add">Add</button> <button class="addAll">Add All</button> <button class="remove">Remove</button> <button class="removeAll">Remove All</button> 

jQuery的：

 $('.add').on('click', function() { var options = $('select.multiselect1 option:selected').sort().clone(); $('select.multiselect2').append(options); }); $('.addAll').on('click', function() { var options = $('select.multiselect1 option').sort().clone(); $('select.multiselect2').append(options); }); $('.remove').on('click', function() { $('select.multiselect2 option:selected').remove(); }); $('.removeAll').on('click', function() { $('select.multiselect2').empty(); }); 

示例锻炼

Answer 3

有一个更简单的方法来做到这一点：

 var options = $("#myOldSelect").html(); $('#myNewSelect').html(options); 

如果要将新的Select添加到DOM，并且已包含复制的选项，那么这非常方便：

 var options = $("#myOldSelect").html(); $("#domLocation").append("<select id='myNewSelect'>" + options + "</select"); 

Answer 4

 $('#cloneBtn').click(function() { var $options = $("#myselect > option").clone(); $('#second').empty(); $('#second').append($options); $('#second').val($('#myselect').val()); }); 

这用于复制值和innerHTML。 最好是复制键，值和OPTIONS.ie选定的值和选项。