Javascript 使用Javascript中的选项动态添加输入类型选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7340644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add input type select with options in Javascript
提问by Jake
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.
我发现在 Javascript 中向表单添加输入非常简单，但由于某种原因，添加带有选项的选择输入不起作用。选项出现在下拉菜单之外。
Here's my code in jsfiddle: http://jsfiddle.net/LNVTQ/
这是我在 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:
和 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.
我将接受使用 jQuery 或仅使用 vanilla Javascript 的答案。
回答by Chandu
Pure Vanila JS
纯香草 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
jQuery 版本
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>回答by Gus
Each time you set the innerHTMLproperty, your browser will create DOM elements of what you inserted.
每次设置该innerHTML属性时，您的浏览器都会为您插入的内容创建 DOM 元素。
When you added <select>to the innerHTML, your browser most likely added </select>to make it valid html.
当您添加<select>到 innerHTML 时，您的浏览器很可能会添加</select>以使其成为有效的 html。
Then when you retrieved it to add the options, it came back as <select></select>.
然后，当您检索它以添加选项时，它返回为<select></select>.
Try building the whole html string to insert in a normal variable and inserting it just once.
尝试构建整个 html 字符串以插入普通变量并仅插入一次。
