jQuery 如何将 <option> 从一个 <select> 复制到另一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10781500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to copy <option> from one <select> to another?
提问by pixelator
I am using the two sided multi select found here http://www.stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.htmland need to add the selected options in the right hand multiselect to another select list with JQuery. Has anyone had to do this before and knows a quick way of doing this?
我正在使用此处找到的两侧多选http://www.stevefenton.co.uk/cmsfiles/assets/File/twosidemultiselect.html并且需要使用 JQuery 将右侧多选中的选定选项添加到另一个选择列表中。有没有人以前必须这样做并且知道这样做的快速方法？
var selectedOptions = $("#myselect")[0].options;will get the options but how to write these to the other select?
var selectedOptions = $("#myselect")[0].options;将获得选项，但如何将这些写入其他选择？
回答by gdoron is supporting Monica
回答by thecodeparadox
<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:
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();
});
回答by dallin
There is an even easier way to do this:
有一种更简单的方法可以做到这一点：
var options = $("#myOldSelect").html();
$('#myNewSelect').html(options);
This is really handy if you want to add the new Select to the DOM with the copied options already included:
如果您想将新的 Select 添加到已包含复制选项的 DOM，这真的很方便：
var options = $("#myOldSelect").html();
$("#domLocation").append("<select id='myNewSelect'>" + options + "</select");
回答by Sumeet Patil
$('#cloneBtn').click(function() {
var $options = $("#myselect > option").clone();
$('#second').empty();
$('#second').append($options);
$('#second').val($('#myselect').val());
});
This is used to copy the value and the innerHTML. Its better to copy the key, value and the OPTIONS.i.e. the selected value and the options.
这用于复制值和innerHTML。最好复制键、值和 OPTIONS.ie 选择的值和选项。
