Christos Baziotis Christos Baziotis - 1 year ago 104
Javascript Question

Javascript - add select programmatically

I want to create a function in order to programmatically add some elements on a page. Lets say i want to add a drop-down list with four options:

<select name="drop1" id="Select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>

How can i do that?

Answer Source

This will work (pure JS, appending to a div of id myDiv):

var myDiv = document.getElementById("myDiv");

//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement("select"); = "mySelect";

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];