Javascript：如何將所有選項從一個select元素複製到另一個？

Question

如何將一個select元素的所有options複製到另一個？請給我最簡單的方法，我對循環過敏。

請幫幫我。提前致謝！

Answer 1

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：

var first = document.getElementById('selector_a'); 
var options = first.innerHTML; 

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

second.innerHTML = options; 

Answer 2

使用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); 
    ); 
}); 

Answer 3

之一而不循環的最簡單的方法中，使用jquery（的選擇1選擇2 select2 = ID select1 = ID）：

$('#select1 option').clone().appendTo('#select2'); 

沒有jquery：

var select1 = document.getElementById("select1"); 
var select2 = document.getElementById("select2"); 
select2.innerHTML = select2.innerHTML+select1.innerHTML; 

Answer 4

你可以很容易地通過jquery:

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

Answer 5

$('#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. 

Answer 6

我維持其運行像IE7一些IE11的 「兼容模式」 的頁面，上面的純JavaScript的解決方案做了不工作爲了我。使用直接的innerHTML分配，第一個打開選項標記將被莫名其妙地剝離。

我的工作是明確地將select的選項集合中的每個選項附加到新選擇。在這個例子中，它支持一個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); 
} 

希望這有助於別人誰是停留在兼容模式下，因爲這個頁面在列表中的谷歌搜索的頂部。

Answer 7

它的老線程，但我希望以下幫助某人。根本沒有迴路。

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