[removed] How to copy all options from one select element to another?

后端未结

关注

 8  1405

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

Please help me. Than

相关标签:

8条回答

北海茫月

2020-12-28 15:58

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

0 讨论(0)

天涯浪人

2020-12-28 16:00

you can do that easily via 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());
});

0 讨论(0)

执念已碎

2020-12-28 16:01

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

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

Without jquery:

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

0 讨论(0)

春和景丽

2020-12-28 16:01

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

0 讨论(0)

名媛妹妹

2020-12-28 16:03

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;

0 讨论(0)

灰色年华

2020-12-28 16:06

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

0 讨论(0)

1 2 下一页