Javascript: Как скопировать все параметры из одного элемента select в другой?

Как скопировать все options одного элемента select в другое? Пожалуйста, дайте мне самый простой способ, у меня аллергия на цикл.

Пожалуйста, помогите мне. Спасибо заранее!

Ответ 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;

Ответ 2

Один из самых простых способов без цикла: jquery (select1= id для выбора 1, select2= id для выбора 2):

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

Без jquery:

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

Ответ 3

Я поддерживаю некоторые страницы режима совместимости с IE11, которые работают как IE7, и чистое решение javascript выше не работает для меня. Первый тег опций открытия будет необъяснимо разделен с использованием прямого назначения innerHTML.

Что сработало для меня, явное добавление каждой опции в коллекцию опций выбора к новому выбору. В этом случае он должен был поддерживать вызов 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.

Ответ 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);
    );
});

Ответ 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());
});

Ответ 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.

Ответ 7

Его более старая нить, но я надеюсь, что следующее поможет кому-то. Нет петель вообще.

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

Ответ 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>