使用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.

Answer 1

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> 

Answer 2

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.