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

Posted 2023-02-22

【中文标题】选择特定选择值时显示隐藏输入

【英文标题】：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 是什么，也不知道它是否存在。

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