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

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

这是我的代码：

  Become a member Send us your questions / comments  Name:  Comments/questions:
  
  

 $(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并在选择器中添加“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 2

你只需要包含jQuery

这是更正的一个： http ： //jsfiddle.net/edgarinvillegas/7wzUG/7/

干杯

Answer 3

这是与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。

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