How to add select in javascript

Question

I am trying to add option in select tag but its not working.

container.appendChild(document.createTextNode("location"));
var select = document.createElement("select");
var option1 = document.createElement("option");
option1.text = "mumbai";
option1.value = "mumbai";
container.appendChild(option1);
container.appendChild(select);

You're adding the option element to whatever container contains and not the select — Andreas
– Andreas, Commented Dec 17, 2016 at 11:08

Ionut Necula · Accepted Answer · 2016-12-17 11:19:54Z

4

You're adding the option to the container and not to the select. So change container.appendChild(option1); to select.appendChild(option1);:

var container = document.getElementById('elem')
container.appendChild(document.createTextNode("location"));
var select = document.createElement("select");
container.appendChild(select);
var counter = 0;
document.getElementById("btn").addEventListener("click", function() {
  counter++;
  var option1 = document.createElement("option");
  option1.text = "mumbai" + counter;
  option1.value = "mumbai" + counter;
  select.appendChild(option1);
});

<div id='elem'>

</div>
<button name='btn' id='btn'>Add</button>

edited Dec 17, 2016 at 11:19

answered Dec 17, 2016 at 11:10

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

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

Comments

sabithpocker · Accepted Answer · 2016-12-17 11:31:55Z

2

An alternate way is to add to options list of select.

var select = document.getElementById('select');
var options = select.options;
options[options.length] = new Option("Option 1", "1");
options[options.length] = new Option("Option 2", "2");

<select id="select"></select>

HTMLSelectElement.add() is another possibility.

var sel = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

document.body.appendChild(sel);

answered Dec 17, 2016 at 11:31

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

Comments

Jarek · Accepted Answer · 2016-12-17 11:27:54Z

1

You have add option1 element to select element instead of container element.

Change line:

container.appendChild(option1);

To:

select.appendChild(option1);

edited Dec 17, 2016 at 11:27

answered Dec 17, 2016 at 11:12

Jarek

9971 gold badge7 silver badges20 bronze badges

2 Comments

Ionut Necula Over a year ago

Your eplanation says something but your code says something else.

Jarek Over a year ago

Why? Its about change element "container" to "select". In code example I just change this and comment this line.

Collectives™ on Stack Overflow

How to add select in javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related