Populating two dropdown menus in one loop Javascript

Question

I'm trying to populate two dropdown menus in Javascript with numbers within the same for loop, but only one is ever populated (the last one)

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

The element 'second' will get populated, where as the other will not, if I put 'second' above 'first' then 'first' will be populated.

How can I do this without using two for loops? I have tried passing the ID via a function to the loop and I still get the same output.

Thanks.

Chinmayee G · Accepted Answer · 2010-12-01 10:26:01Z

3

Little modification in your 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);               
}

edited Dec 1, 2010 at 10:26

answered Dec 1, 2010 at 10:18

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elliott Over a year ago

I'm doing this in pure Javascript, i'm getting an error as .clone isn't actually a function?

Chinmayee G Over a year ago

@Elliott, my mistake I was using some library. Please refer update code with element.cloneNode(boolean) method

Collectives™ on Stack Overflow

Populating two dropdown menus in one loop Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related