Question

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

Answer 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);
 }
});

Answer 2

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

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

Answer 3

这是

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

如果您使用"开始字符串，则必须转义其中的字符"（\"）或使用'

Answer 4

使用jQuery

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

Answer 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>

javascript / jquery生成输入元素

5 个答案: