Adding multiple select boxes in javascript dynamically to DOM

Question

selectBox1 = document.createElement("select");
selectBox2 = document.createElement("select");
selectBox1.setAttribute("id","select1");
selectBox2.setAttribute("id","select2");

tr = document.createElement('tr');
for(var k = 1; k<headers.length; k++){
 var op = new Option();
 var op1 = new Option();
 op.value = op1.value= headers[k];
 op.text = op1.text =  headers[k];
 selectBox1.options.add(op);
 selectBox2.options.add(op);      
  th = document.createElement('th');
  th.appendChild(document.createTextNode(headers[k]));

  tr.appendChild(th);

}
document.getElementById("table").appendChild(selectBox1);
document.getElementById("table").appendChild(selectBox2);

When I use op object and insert the option in the 1st and 2nd select box, only the 2nd select box is populated and 1st one is empty. I've to take two option objects. Why is that so? It's not a problem but I want to understand why it's happening.

Even I am wondering how this is happening but since you are already creating one more option op1 try adding that as option DEMO — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 6, 2015 at 7:20

Elheni Mokhles · Accepted Answer · 2015-08-06 07:21:26Z

3

What you need to know if you selectBox1.options.add(op) you will add op to selectBox1 options then when you do selectBox2.options.add(op) it will remove it from selectBox1 options and add it to selectBox2 options.

use that op1

selectBox1.options.add(op1);
selectBox2.options.add(op);

edited Aug 6, 2015 at 7:21

answered Aug 6, 2015 at 7:17

Elheni Mokhles

4,0112 gold badges15 silver badges17 bronze badges

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

3 Comments

Guruprasad J Rao Over a year ago

I don't think so buddy. It will not remove the option and add it to another when you use add! But yea this solution works!

Elheni Mokhles Over a year ago

You have taked an html element and put it in another element yes he do remove it from the first.

Guruprasad J Rao Over a year ago

I think you are right.. But its not because of add but its because of pass by reference concept!

Guruprasad J Rao · Accepted Answer · 2015-08-06 08:09:06Z

Why this is happening

I feel this is happening because of pass by reference concept.

So consider this line

var op=new Option()

A reference to the option object will be created and the above line will be equivalent to

var op=document.createElement('option')

So what happens here is once a reference to the object is created that reference can be assigned to only one element at a time. That is why adding and removal of option is happening and the same reference will be given to 2nd select and if you see in DOM perspective there will be only one option element created and it can be assigned to only select element. A fact the coding language or html follows.

Conclusion

Either you have to create a new reference as you are doing now like op,op1 or you can directly use below line without any extra code of creating option assigning text and value to it etc.,

selectBox1.options.add(new Option(headers[k],headers[k]));
selectBox2.options.add(new Option(headers[k],headers[k]));

A sample DEMO

Hope this makes sense and reference for my explanation - Source where in they have stated :

Before you use new objects, you must explicitly add them to their respective collections or to the document.

Collectives™ on Stack Overflow

Adding multiple select boxes in javascript dynamically to DOM

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related