选择特定选择值时显示隐藏输入答案

【问题标题】：Making Hidden Input Appear when Specific Select Value is Chosen选择特定选择值时显示隐藏输入
【发布时间】：2013-04-08 11:29:20
【问题描述】：

我正在制作一个自定义表单，以使用隐藏的 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>

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

【问题讨论】：

请注意，您的字符串已损坏 - 您可以在 hidden 和 weight 的语法突出显示中看到它。
我能想到的除了 ahren 的声明之外的唯一一件事就是将它放在 jQuery(function($){ 内
是的，我们不知道#test_form 是什么，也不知道它是否存在。

标签： jquery html forms select paypal

【解决方案1】：

检查一下FIDDLE，不要只是复制和使用，检查你的错误

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

把你的代码改成这个

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

【讨论】：

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

【讨论】：