javascript/jquery 生成输入元素答案

【问题标题】：javascript/jquery generate input elementjavascript/jquery 生成输入元素
【发布时间】：2012-08-11 03:37:36
【问题描述】：

所以我有这个代码。我想完成一些事情对于 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>

所以我想在选择 'Other' 选项后添加输入字段。我知道有解决此问题的简单方法，但我无法使其工作：

document.getElementById('custom_price').innerHTML += "<input type="text" name="amount"/>"

所以 custom_div 看起来像：

<div id="custom_price">
Custom price:<br>
<input type="text" name="amount"/>
</div>

【问题讨论】：

提示：查看语法高亮。
@SLaks - 是的，那里有语法错误！所有发布的答案（包括我的）只是执行 OP 已经完成的相同事情的不同方法 :)

标签： javascript jquery input field add

【解决方案1】：

最好的方法是实际制作 dom 元素。

var newInput = document.createElement("input");
newInput.type="text";
newInput.name="amount";
document.getElementById('custom_price').appendChild(newInput);

也许有这样的处理程序：

为您选择一个 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);
 }
});

【讨论】：

【解决方案2】：

根据您使用 jQuery 的问题的标签来判断。所以添加一个输入是相当容易的。

$("select[name=amount]").change(function() {
    if ($(this).val() == 'Other') {
        $("#custom_price").append('<input type="text" name="amount"/>');
    }
})

【讨论】：

感谢您的代码。但是当我选择其他时，什么都没有出现...？
多余的 jQuery：if (this.value=='Other') ... 怎么样
这将在每次客户端选择“其他”选项时创建新的输入字段。在追加之前使用“.empty()”。
现在可以使用了。正如我所说的我对 js 很笨，我把代码放在表单之前，这就是为什么它一开始没有用。非常感谢。
@bornie 查看 $(document).ready(function(){ //code });它允许您在文档加载后运行代码。

【解决方案3】：

这是

document.getElementById('custom_price').innerHTML += '<input type="text" name="amount" />';

如果您使用" 开始一个字符串，您必须将其中的字符" 转义(\") 或使用'

【讨论】：

【解决方案4】：

使用 jQuery

$("#custom_price").empty().append('Custom price:<br><input type="text" name="amount"/>')

【讨论】：

【解决方案5】：

只需将输入放在 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>

【讨论】：

谢谢，但我不想隐藏它。我希望在用户选择某个值后生成它。这对我来说很重要。
请问为什么您需要动态创建元素？这不是要回答确切的问题，而是要以正确（更好）的方式实施事情。
看看问题出在贝宝表单上。我有与 $ 金额相对应的选择选项。还有自定义付款字段。但由于贝宝不允许用户定义的变量，我必须命名选择和自定义金额变量相同 > name="amount"。在用户选择一个选项的情况下，其他自定义金额变量仍然存在（如下），因此当重定向到贝宝时，即使用户从菜单中选择 100 美元，金额也是 0
好的，知道了。我会为此创建一个带有隐藏字段的代理表单。您可以在必要时使用 javascript 更新字段值并发送此代理表单而不是可见的。这样您将拥有很大的灵活性。
我会用谷歌搜索的。感谢您告诉我，我不知道这种方法。