使用 Jquery 根据选定的下拉选项隐藏表单元素

Question

我有一个包含下拉菜单、几个文本字段和一个文本区域的表单。如果选择了下拉菜单中的选项之一，我希望表单隐藏文本区域。

这是我的代码：

<form id="contact" name="contact" action="" method="post">
<select name='select-question'>
    <option value="member-request">Become a member</option>
    <option value="question">Send us your questions / comments</option>
</select>
Name:
<input type="text" name="last-name"></input>
Comments/questions:</br>
<textarea id="comments" name="questions-field" rows="5" cols="27"></textarea>
<br />
<input type="submit" name="submit" value="Submit"></input>

$(document).ready(function () {
    $('#contact select[name="select-question"]').change(function () {
        if ($('#contact select[name="select-question"]').val() == 'question') {
            $('#comments').show();
        } else {
            $('#comments').hide();
        }
    });
});

我也发到了 JS fiddle：http://jsfiddle.net/7wzUG/5/

我对 JQuery 很陌生，我不确定为什么这不起作用。 感谢您的帮助。

Answer 1

这是与 Simon Steinberger 和 Edgar Villegas Alvarado 相同的代码，但使用了三元运算符

http://jsfiddle.net/4uj2fhoh/

$(document).ready(function () {
    $('#contact select[name="select-question"]').change(function () {
        $('#contact select[name="select-question"]').val() == 'question' ? $('#comments').show() : $('#comments').hide()
    });
});

正如其他人所说，添加 JQuery。

您还可以添加一个隐藏 cmets 文本区域的类，然后根据下拉选择打开/关闭它。

Answer 2

包含 jQuery 并在您的选择器中添加“option:selected”：

$(document).ready(function () {
    $('#contact select[name="select-question"]').change(function () {
        if ($('#contact select[name="select-question"] option:selected').val() == 'question') {
            $('#comments').show();
        } else {
            $('#comments').hide();
        }
    });
});

您还需要通过 CSS 样式隐藏加载时的 cmets，并将标签放置在 cmets div 容器内，以便在适当时标签不可见。

这是工作小提琴： http://jsfiddle.net/7wzUG/9/

Answer 3

你只需要包含jQuery

以下是更正后的： http://jsfiddle.net/edgarinvillegas/7wzUG/7/

干杯