Peupler deux menus déroulants dans une boucle Javascript

Question

Je suis en train de remplir deux menus déroulants en Javascript avec des numéros dans le même pour la boucle, mais une seule est toujours peuplée (la dernière)

for (var i=1; i<10; i++) 
{ 
    var option = document.createElement("option"); 
    option.text = i; 
    option.value = i;   
    document.getElementById('first').options.add(option); 
    document.getElementById('second').options.add(option);    
} 

L'élément 'second' sera peuplé, où l'autre ne le sera pas, si je mets 'second' au dessus de 'first' alors 'first' sera peuplé.

Comment est-ce que je peux faire ceci sans employer deux pour des boucles? J'ai essayé de passer l'ID via une fonction à la boucle et j'ai toujours la même sortie.

Merci.

Answer 1

Petite modification dans votre script

for (var i=1; i<10; i++) 
{ 
    var option = document.createElement("option"); 
    option.text = i; 
    option.value = i; 
    var newOption = option.cloneNode(true); 

    document.getElementById('first').options.add(option); 
    document.getElementById('second').options.add(newOption);    
}