blocks|key|881694|text|html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|881695|<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>|code-block|syntax|javascript|881696|javascript：|881697|var+first+=+document.getElementById('selector_a');
var+options+=+first.innerHTML;

var+second+=+document.getElementById('selector_b');
var+options+=+second.innerHTML+%2B+options;

second.innerHTML+=+options;|881698|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>html:</p>

<pre><code>&lt;select id="selector_a"&gt;
    &lt;option&gt;op 1&lt;/option&gt;
    &lt;option&gt;op 2&lt;/option&gt;
&lt;/select&gt;

&lt;select id="selector_b"&gt;
    &lt;option&gt;op 3&lt;/option&gt;
    &lt;option&gt;op 4&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>javascript:</p>

<pre><code>var first = document.getElementById('selector_a');
var options = first.innerHTML;

var second = document.getElementById('selector_b');
var options = second.innerHTML + options;

second.innerHTML = options;
</code></pre>


blocks|key|664581|text|无需循环的最简单方法之一是使用jquery+(select1+=+select+1的id，select2+=+select+2的id+)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|664582|$('#select1+option').clone().appendTo('#select2');|code-block|syntax|javascript|664583|不使用jquery|664584|var+select1+=+document.getElementById("select1");
var+select2+=+document.getElementById("select2");
select2.innerHTML+=+select2.innerHTML%2Bselect1.innerHTML;|664585|entityMap^0|F|6|N|7|19|7|0|0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

<p>One of the easiest ways without looping, is using <code>jquery</code> (<code>select1</code> = id of select 1, <code>select2</code> = id of select 2):</p>

<pre><code>$('#select1 option').clone().appendTo('#select2');
</code></pre>

<p>Without <code>jquery</code>:</p>

<pre><code>var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select2.innerHTML = select2.innerHTML+select1.innerHTML;
</code></pre>


blocks|key|881607|text|使用jQuery+foreach？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|881608|$("#the-id+option").each(function()+{
++++var+val+=+$(this).val();
++++var+txt+=+$(this).html();
++++$("the-other-id").append(
++++++++$('<option></option>').val(val).html(txt);
++++);
});|code-block|syntax|javascript|881609|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>use jQuery foreach?</p>

<pre><code>$("#the-id option").each(function() {
    var val = $(this).val();
    var txt = $(this).html();
    $("the-other-id").append(
        $('&lt;option&gt;&lt;/option&gt;').val(val).html(txt);
    );
});
</code></pre>


blocks|key|881685|text|您可以通过jquery:轻松实现这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|881686|<select+id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<select+id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

$(document).ready(function(){
++++$("#sel2").html($("#sel1").html());
});|code-block|syntax|javascript|881687|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/e7zeu/^0|5|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>you can do that easily via <a href="http://jsfiddle.net/e7zeu/" rel="nofollow">jquery:</a></p>

<pre><code>&lt;select id="sel1"&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;/select&gt;

&lt;select id="sel2"&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;/select&gt;

$(document).ready(function(){
    $("#sel2").html($("#sel1").html());
});
</code></pre>


blocks|key|881711|text|$('#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.|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|881712|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#cloneBtn').click(function() {
    var $options = $("#myselect &gt; 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.
</code></pre>


blocks|key|881750|text|这是一个较老的帖子，但我希望下面的文章能对某些人有所帮助。完全没有循环。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|881751|function+copyFromMultiselect(srcId,targetId,+allFlag){
++++if(allFlag){
++++++++$("#"%2BtargetId).append($("#"%2BsrcId).html());
++++++++$("#"%2BsrcId).empty();
++++}else{
++++++++$("#"%2BtargetId).append($("#"%2BtabContentId%2B"+#"%2BsrcId%2B"+option:selected"));
++++}
++}|code-block|syntax|javascript|881752|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Its an older thread but I hope the following helps someone. No loops at all.</p>

<pre><code>function copyFromMultiselect(srcId,targetId, allFlag){
    if(allFlag){
        $("#"+targetId).append($("#"+srcId).html());
        $("#"+srcId).empty();
    }else{
        $("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
    }
  }
</code></pre>


blocks|key|664699|text|++++//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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|664700|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    //first ans can be modified as follows to get direct result while using dropdown
    &lt;html&gt;
    &lt;head&gt;
    &lt;script&gt;
    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;
    }
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="myFunction1()"&gt;
    &lt;select id="selector_main" onchange="myFunction1()"&gt;
    &lt;option value="none" disabled&gt;--choose--&lt;/option&gt;
    &lt;option value="1"&gt;option_A&lt;/option&gt;
    &lt;option value="2"&gt;option_B&lt;/option&gt;
    &lt;/select&gt;
    &lt;select id="selector_a" hidden&gt;
    &lt;option value="none" disabled&gt;--select--&lt;/option&gt;
    &lt;option&gt;op1&lt;/option&gt;
    &lt;option&gt;op 2&lt;/option&gt;
    &lt;/select&gt;

    &lt;select id="selector_b" hidden&gt;
    &lt;option value="none" disabled&gt;--select--&lt;/option&gt;
    &lt;option&gt;op 3&lt;/option&gt;
    &lt;option&gt;op 4&lt;/option&gt;
    &lt;/select&gt;
    &lt;select id="selector_c"&gt;
    &lt;option&gt;--select col1 first--&lt;/option&gt;   
    &lt;/select&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>


<p>How can I copy all <code>options</code> of one <code>select</code> element to another? Please give me the easiest way, I'm allergic to looping.</p>

<p>Please help me. Thanks in advance!</p>


Javascript: How to copy all options from one select element to another?

jQuery

如何将一个select元素的所有options复制到另一个元素？请告诉我最简单的方法，我对循环过敏。请帮帮我。提前感谢！

问Javascript:如何将所有选项从一个选择元素复制到另一个选择元素？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript:如何将所有选项从一个选择元素复制到另一个选择元素？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript:如何将所有选项从一个选择元素复制到另一个选择元素？
EN