Javascript:如何将所有选项从一个select元素复制到另一个?
如何将一个select
元素的所有options
复制到另一个?请给我最简单的方法,我对循环过敏。Javascript:如何将所有选项从一个select元素复制到另一个?
请帮帮我。提前致谢!
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;
使用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);
);
});
男人,我讨厌循环...有没有什么办法可以做到这一点没有循环?另外,我不使用jQuery。 – dpp 2011-06-01 09:10:23
之一而不循环的最简单的方法中,使用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;
你可以很容易地通过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());
});
$('#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.
我维持其运行像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);
}
希望这有助于别人谁是停留在兼容模式下,因为这个页面在列表中的谷歌搜索的顶部。
它的老线程,但我希望以下帮助某人。根本没有回路。
function copyFromMultiselect(srcId,targetId, allFlag){
if(allFlag){
$("#"+targetId).append($("#"+srcId).html());
$("#"+srcId).empty();
}else{
$("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
}
}
也许有人会发现它有帮助。我有一个类似的任务,我想复制表列的所有行的选择。我用sel1 = sel0.cloneNode(true) – Singagirl 2016-07-11 02:45:05
非常有用,@Singagirl。谢谢!请注意稍后更改ID。 – Rodrigo 2017-02-13 01:02:48