javascript/jquery生成输入元素

所以我有这个代码。我想做点什么 对于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>

因此，我想在选择“其他”选项后添加输入字段。我知道有 一个简单的解决方法，但我无法让它工作：

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>

---

最好的方法是实际生成dom元素

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

也许有这样的处理程序：

分配您的帐户并选择一个id：

使用jQuery

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

---

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

---

根据问题的标签判断，您正在使用jQuery。因此，添加输入是相当容易的

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

它是

---

如果使用启动sring，则必须替换其中的字符\或使用“

提示：查看语法高亮显示。@SLaks-啊，是的，那里有语法错误！所有张贴的答案，包括我的答案，只是不同的方法来做同样的事情的OP已经psuedo完成：谢谢你的代码。但当我选择“其他”时，不会显示任何内容？多余的jQuery：如果this.value=='Other'，这将在客户端每次选择其他选项时创建新的输入字段。在追加之前使用.empty。它现在可以工作了。正如我所说，我在js方面很笨，我把代码放在表单之前，这就是为什么它一开始不起作用。非常感谢。@bornie签出$document.readyfunction{//code}；它允许您在加载文档后运行代码。谢谢，但我不想隐藏它。我希望在用户选择某个值后生成它。这在我的例子中很重要。我可以问一下，为什么需要动态创建元素？这不是关于回答确切的问题，而是关于以正确更好的方式实现事情。看，问题在于paypal表单。我有对应于美元金额的选择选项。还包括自定义付款字段。但是由于paypal不允许用户定义变量，我必须选择名称并将自定义金额变量命名为相同的>名称=金额。当用户选择一个选项时，另一个自定义金额变量仍在下面，因此当重定向到paypal时，即使用户从menuok中选择100美元，金额也为0，明白了。我会为此创建一个带有隐藏字段的代理表单。您可以在必要时使用javascript更新字段值，并发送此代理表单而不是可见的表单。这样你会有很大的灵活性。我会用谷歌搜索。谢谢你让我知道，我不知道这种方法。

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

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