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，它将显示文本字段，否则将隐藏文本字段

选择特定选择值时出现隐藏输入

4 个答案: