[英]Dynamically add input type select with options in Javascript
我发现在Javascript中添加表单的输入非常简单,但由于某种原因,添加带选项的选择输入无效。 选项出现在下拉列表之外。
这是我在jsfiddle中的代码: http : //jsfiddle.net/LNVTQ/
这是我的代码内联:
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);
}
和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>
我会接受使用jQuery或只是vanilla Javascript的答案。
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>
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>
每次设置innerHTML
属性时,浏览器都会创建插入内容的DOM元素。
当您将<select>
添加到innerHTML时,您的浏览器很可能添加了</select>
以使其成为有效的html。
然后,当您检索它以添加选项时,它将返回<select></select>
。
尝试构建整个html字符串以插入普通变量并插入一次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.