Javascript: Как скопировать все параметры из одного выбранного элемента в другой? - PullRequest
Новая
       16

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

18 голосов
/ 01 июня 2011

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

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

Ответы [ 7 ]

29 голосов
/ 01 июня 2011

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

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

Без jquery: 

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select2.innerHTML = select2.innerHTML+select1.innerHTML;
23 голосов
/ 01 июня 2011

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;
4 голосов
/ 13 мая 2015

Я поддерживаю некоторые страницы IE6 «режима совместимости», которые работают как 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.

2 голосов
/ 01 июня 2011

Вы можете сделать это легко через 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());
});
2 голосов
/ 01 июня 2011

использовать 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 голосов
/ 16 мая 2017

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

function copyFromMultiselect(srcId,targetId, allFlag){
    if(allFlag){
        $("#"+targetId).append($("#"+srcId).html());
        $("#"+srcId).empty();
    }else{
        $("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
    }
  }
0 голосов
/ 10 февраля 2014 
$('#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.
...