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

【问题标题】：How to copy <option> from one <select> to another?如何将 <option> 从一个 <select> 复制到另一个？
【发布时间】：2012-05-28 08:24:23
【问题描述】：

我正在使用此处http://www.stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.html 找到的双面多选，并且需要使用 JQuery 将右侧多选中的选定选项添加到另一个选择列表中。有没有人以前必须这样做并且知道快速的方法？

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

Live DEMO

【讨论】：

嗨，两个非常好的解决方案，但我正在寻找的是选项被添加到动态创建的第二个选择中，即由两侧多选插件创建的选项，它们也被添加到页面上的另一个选择菜单，从而提供相同的内容。
好的，现在可以使用 $().ready(function() { $('#primaryGroup').click(function() { return !$('#myselect option')。 appendTo('#primaryGroup'); }); $('#editgroup').click(function() { return !$('#primaryGroup option.moveme').appendTo('#myselect'); }); } );但是.. chrome 中的点击事件仅适用于第二次点击，这显然是一个已知的错误，有没有人知道解决这个问题的方法？
如果想从源列表中复制特定编号的项目，该怎么办？例如...如果源列表包含项目 1-19，并且我们只复制项目直到选定项目？
@asad 只复制那些，只需更改选择器。
@gdoron 有什么提示吗？ :)

【解决方案2】：

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

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

如果您想将新的 Select 添加到 DOM 并包含已复制的选项，这真的很方便：

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

【讨论】：

【解决方案3】：

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

这用于复制值和innerHTML。最好复制键、值和 OPTIONS.i.e.选择的值和选项。

【讨论】：

不错的答案。它在新的选择框上保持选择。
这是我最喜欢的答案。谢谢你。顺便说一句，我有一个问题要问你。为什么需要代码行： var $options = $("#myselect > option").clone(); ?

【解决方案4】：

<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();
});

Sample Workout

【讨论】：

不错。我想我们可以稍微调整一下，让一个选项只添加到右侧一次。