javascript/jquery 生成输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11959186/
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
javascript/jquery generate input element
提问by inrob
So I have this code. And I want to accomplish something probably simple for javascript guys. If a certain option is selected then add an input field on a div.
所以我有这个代码。我想为 javascript 人员完成一些可能很简单的事情。如果选择了某个选项，则在 div 上添加一个输入字段。
<select name="amount" >
<option value="50">50$</option>
<option value="100">100$</option>
<option value="Other">Other</option>
</select>
<div id="custom_price">
</div>
So I want to add the input field once the 'Other'option is selected. I know there's a simple way around this but I cannot make it work:
所以我想在选择“其他”选项后添加输入字段。我知道有一个简单的方法可以解决这个问题，但我无法让它工作：
document.getElementById('custom_price').innerHTML += "<input type="text" name="amount"/>"
So custom_div would look like:
所以 custom_div 看起来像：
<div id="custom_price">
Custom price:<br>
<input type="text" name="amount"/>
</div>
回答by Travis J
Best way would be to actually make the dom element.
最好的方法是实际制作 dom 元素。
var newInput = document.createElement("input");
newInput.type="text";
newInput.name="amount";
document.getElementById('custom_price').appendChild(newInput);
Perhaps with a handler like this:
也许有这样的处理程序：
assign your select an id: <select name="amount" id="amount">
为您的选择分配一个 ID： <select name="amount" id="amount">
$("#amount").change( function() {
if( $(this).val() == "Other" ){
document.getElementById('custom_price').innerHTML = "";
var newInput = document.createElement("input");
newInput.type="text";
newInput.name="amount";
document.getElementById('custom_price').appendChild(newInput);
}
});
回答by WTK
Judging by tags of your question you're using jQuery. So adding an input is fairly easy.
根据您使用 jQuery 的问题标签判断。所以添加一个输入是相当容易的。
$("select[name=amount]").change(function() {
if ($(this).val() == 'Other') {
$("#custom_price").append('<input type="text" name="amount"/>');
}
})
回答by Oriol
It's
它是
document.getElementById('custom_price').innerHTML += '<input type="text" name="amount" />';
If you start a sring using ", you have to scape the caracters "inside it (\") or use '
如果您在使用开始SRING "，你必须花葶的caracters"里面（\"）或使用'
回答by Diode
Using jQuery
使用 jQuery
$("#custom_price").empty().append('Custom price:<br><input type="text" name="amount"/>')
回答by Slava Fomin II
Just place the input inside of a div and hide div initially. Then use jQuery/JS to show this div when necessary.
只需将输入放在 div 内并最初隐藏 div。然后在必要时使用 jQuery/JS 来显示这个 div。
$('select[name="amount"]').change(function() {
if($(this).val() == 'Other') {
$('#custom_price').show();
} else {
$('#custom_price').hide();
}
});
<div id="custom_price" style="display: none;">
<p>Custom price:</p>
<input type="text" name="amount"/>
</div>
