Question

如何将一个options元素的所有select复制到另一个元素？请给我最简单的方法，我对循环过敏。

请帮帮我。提前谢谢！

Answer 1

没有循环的最简单方法之一是使用jquery（{1}} = id为select 1，select1 = id为select 2）：

select2

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

jquery

Answer 2

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 3

我维护了一些像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);
}

希望这可以帮助其他任何陷入兼容模式的人，因为此页面位于Google搜索列表的顶部。

Answer 4

使用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 5

您可以通过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 6

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

它是一个较旧的线程，但我希望以下帮助某人。根本没有循环。

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

Answer 8

    //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>

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

8 个答案: