12

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.

Jake
  • 2,515
  • 5
  • 26
  • 41
  • 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 Sep 07 '11 at 21:21

2 Answers2

26

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>
jesterjunk
  • 2,342
  • 22
  • 18
Chandu
  • 81,493
  • 19
  • 133
  • 134
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.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
Gus
  • 7,289
  • 2
  • 26
  • 23