web-dev-qa-db-fra.com

Javascript: comment copier toutes les options d'un élément à un autre?

Comment copier tous les options d'un élément select dans un autre? S'il vous plaît donnez-moi le moyen le plus facile, je suis allergique à la boucle.

Aidez-moi, s'il vous plaît. Merci d'avance!

javascripthtmlselectoption
17
dpp

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;
22
helle

L’une des manières les plus simples de ne pas utiliser de boucle consiste à utiliser jquery (select1 = id de select 1, select2 = id de select 2):

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

Sans jquery:

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

Je gère certaines pages "mode de compatibilité" IE11 qui fonctionnent comme IE7, et la solution purement javascript ci-dessus ne fonctionnait pas pas et fonctionnait pour moi. La première balise d'option d'ouverture serait inexplicablement supprimée à l'aide d'une affectation directe innerHTML.

Ce qui a fonctionné pour moi a été d'ajouter explicitement chaque option de la collection d'options de la sélection à la nouvelle sélection. Dans ce cas, il s'agissait de prendre en charge un appel AJAX. J'ai donc tout d'abord effacé la liste, mais je suis sûr que cela pourrait également être ajouté.

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

J'espère que cela aidera toute autre personne bloquée en mode de compatibilité, car cette page figurait en haut de la liste dans une recherche Google.

3
Lathejockey81

utiliser 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);
    );
});
2
Mohamed Nuur

vous pouvez le faire facilement 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());
});
2
melaos

C'est un fil plus ancien, mais j'espère que ce qui suit aidera quelqu'un. Pas de boucles du tout.

function copyFromMultiselect(srcId,targetId, allFlag){
    if(allFlag){
        $("#"+targetId).append($("#"+srcId).html());
        $("#"+srcId).empty();
    }else{
        $("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
    }
  }
0
Fawad Shah
$('#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.
0
Sumeet Patil