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小提琴：http://jsfiddle.net/7wzUG/5/

我对JQuery很新，我不确定为什么这不起作用。谢谢你的帮助。

Answer 1

您只需要加入jQuery

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

干杯

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样式隐藏加载的注释，并将标签放在注释div容器中，这样在适当的时候标签也是不可见的。

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

Answer 3

以下是Simon Steinberger和他的相同代码。埃德加维勒加斯阿尔瓦拉多，但与三元运营商

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。

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

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

3 个答案: