Dynamically add input type select with options in Javascript

Question

I have found adding inputs to a form is quite simple in Javascript, but for some reason adding the select input with options is not working. The options are appearing outside of the dropdown.

Here's my code in jsfiddle: http://jsfiddle.net/LNVTQ/

Here's my code inline:

var choices=[];
choices[0]="one";
choices[1]="two";

function addInput(divName){
    var newDiv=document.createElement('div');
    newDiv.innerHTML="<select>";
    for(i=0; i<choices.length; i=i+1){
        newDiv.innerHTML=newDiv.innerHTML+"<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }
    newDiv.innerHTML=newDiv.innerHTML+"</select>";
    document.getElementById(divName).appendChild(newDiv);
}

And the HTML:

<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

I will accept answers using jQuery or just vanilla Javascript.

Just out of curiosity, what happens if you create the HTML in its own string, then attach that string to the newDiv? It makes me nervous that when you first set the innerHTML it's invalid. — Dave Newton
– Dave Newton, Commented Sep 7, 2011 at 21:21

jesterjunk · Accepted Answer · 2015-05-10 11:51:45Z

Pure Vanila JS

var choices = ["one", "two"];

function addInput(divName) {
    var newDiv = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";
    }
    selectHTML += "</select>";
    newDiv.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(newDiv);
}

<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

jQuery Version

var choices = ["one", "two"];

function addInput(divName) {
    var select = $("<select/>")
    $.each(choices, function(a, b) {
        select.append($("<option/>").attr("value", b).text(b));
    });
    $("#" + divName).append(select);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

James Montagne · Accepted Answer · 2011-09-07 21:24:16Z

6

Each time you set the innerHTML property, your browser will create DOM elements of what you inserted.

When you added <select> to the innerHTML, your browser most likely added </select> to make it valid html.

Then when you retrieved it to add the options, it came back as <select></select>.

Try building the whole html string to insert in a normal variable and inserting it just once.

edited Sep 7, 2011 at 21:24

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

answered Sep 7, 2011 at 21:23

Gus

7,3792 gold badges29 silver badges23 bronze badges

Collectives™ on Stack Overflow

Dynamically add input type select with options in Javascript

2 Answers 2

Pure Vanila JS

jQuery Version

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Pure Vanila JS

jQuery Version

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related