jquery - 选择特定选择值时显示隐藏输入

Question

我正在制作一个自定义表单，以使用隐藏的 HTML 变量向 PayPal 发送信息。这比 PayPal 更像是一个 jQuery 问题。我有一个下拉菜单，我希望仅在为菜单<select>选择某个值时才显示隐藏的输入。<select>例如：

<form class="test_form">
    <select class="test_select">
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
    </select>
    <input type="submit" value="submit" />
</form>

比方说，如果我选择“test2”，我希望隐藏的输入出现在表单中。这是我使用的代码，但它似乎不起作用：

<script>
$('.test_form').change(function(){
if ($(".test_select").val() == 'test2'){
     $("#test_form").html("<input type="hidden" name="weight" value="0.22" />");
}
});
</script>

当我选择某个值时，我该怎么做才能让它出现在我的代码中？谢谢你的帮助！

Answer 1

看看这个FIDDLE，不要只是复制和使用，检查你的错误

$(function(){
    $('.test_select').change(function(){
        if ($(".test_select").val() == 'test2'){
            $(".test_form").append($('<input type="hidden" name="weight" value="0.22" />'));
        }
    });
});

Answer 2

最好的办法是将输入保留在 html 中，但将其隐藏。然后在您喜欢时使其淡入

<input type="text" style="display:none" id="hiddeninput">
....
....
<script>
function disp(){
    $('#hiddeninput').fadeIn(1000);
}
</script>

Answer 3

将您的代码更改为此

$('.test_select').change(function(){ 
    if ($(".test_select").val() == 'test2'){ 
        $('<input>').attr({
            type: 'hidden',
            value: '0.22',
            name: 'weight'
        }).appendTo('form');
    }
});

Answer 4

将此添加到表单内的代码中

<div id="test2" class="tests" style="display: none;">
 <input type="text" name="yourname"/>
</div>

将您的脚本更改为

$('.test_select').change(function() {
  $('.tests').slideUp("slow");
  $('#' + $(this).val()).slideDown("slow");
});

因此，如果您选择 test2 它将显示文本字段，否则它将隐藏文本字段