Javascript：如何将所有选项从一个选择元素复制到另一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6198684/
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
Javascript: How to copy all options from one select element to another?
提问by dpp
How can I copy all optionsof one selectelement to another? Please give me the easiest way, I'm allergic to looping.
如何将options一个select元素的所有内容复制到另一个元素？请给我最简单的方法，我对循环过敏。
Please help me. Thanks in advance!
请帮我。提前致谢！
回答by manji
One of the easiest ways without looping, is using jquery(select1= id of select 1, select2= id of select 2):
不循环的最简单方法之一是使用jquery( select1= select 1 的select2id , = select 2 的 id)：
$('#select1 option').clone().appendTo('#select2');
Without jquery:
没有jquery：
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select2.innerHTML = select2.innerHTML+select1.innerHTML;
回答by helle
html:
html：
<select id="selector_a">
<option>op 1</option>
<option>op 2</option>
</select>
<select id="selector_b">
<option>op 3</option>
<option>op 4</option>
</select>
javascript:
javascript:
var first = document.getElementById('selector_a');
var options = first.innerHTML;
var second = document.getElementById('selector_b');
var options = second.innerHTML + options;
second.innerHTML = options;
回答by Lathejockey81
I maintain some IE11 "compatibility mode" pages which run like IE7, and the pure javascript solution above did notwork for me. The first opening option tag would inexplicably be stripped using a direct innerHTML assignment.
我保持一定的IE11的“兼容模式”，它运行像IE7的页面，高于纯JavaScript解决方案确实不是为我工作。使用直接的innerHTML 分配会莫名其妙地去除第一个开始选项标签。
What worked for me was explicitly appending each option in the select's option collection to the new select. In this instance it was to support an AJAX call, so I cleared the list first, but I'm sure this could append as well.
对我有用的是将选择的选项集合中的每个选项明确附加到新的选择中。在这种情况下，它是为了支持 AJAX 调用，所以我首先清除了列表，但我确信这也可以附加。
var fromSelect = document.getElementById('a');
var toSelect = document.getElementById('b');
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++) {
var option = fromSelect.options[i];
toSelect.appendChild(option);
}
Hopefully this helps anyone else who is stuck in compatibility mode, since this page was at the top of the list in a Google search.
希望这可以帮助其他陷入兼容模式的人，因为此页面在 Google 搜索中位于列表顶部。
回答by Mohamed Nuur
use jQuery foreach?
使用jQuery foreach？
$("#the-id option").each(function() {
var val = $(this).val();
var txt = $(this).html();
$("the-other-id").append(
$('<option></option>').val(val).html(txt);
);
});
回答by melaos
回答by Fawad Shah
Its an older thread but I hope the following helps someone. No loops at all.
它是一个较旧的线程，但我希望以下内容可以帮助某人。根本没有循环。
function copyFromMultiselect(srcId,targetId, allFlag){
if(allFlag){
$("#"+targetId).append($("#"+srcId).html());
$("#"+srcId).empty();
}else{
$("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
}
}
回答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.
回答by Nikhil Sahu
//first ans can be modified as follows to get direct result while using dropdown
<html>
<head>
<script>
onload
function myFunction1(){
var first = document.getElementById('selector_a');
var second = document.getElementById('selector_b');
var chk=document.getElementById('selector_main').value;
if(chk == "1")
var options = first.innerHTML;
else
var options = second.innerHTML;
var out = document.getElementById('selector_c');
out.innerHTML = options;
}
</script>
</head>
<body onload="myFunction1()">
<select id="selector_main" onchange="myFunction1()">
<option value="none" disabled>--choose--</option>
<option value="1">option_A</option>
<option value="2">option_B</option>
</select>
<select id="selector_a" hidden>
<option value="none" disabled>--select--</option>
<option>op1</option>
<option>op 2</option>
</select>
<select id="selector_b" hidden>
<option value="none" disabled>--select--</option>
<option>op 3</option>
<option>op 4</option>
</select>
<select id="selector_c">
<option>--select col1 first--</option>
</select>
</body>
</html>
