使用Jquery根据选定的下拉选项隐藏表单元素 [英] Using Jquery to hide form elements based on selected dropdown option

问题描述

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

以下是我的代码：

 < form id = contactname =contactaction =method =post> 
< select name ='select-question'> 
< option value =member-request>成为会员< / option> 
< option value =question>向我们发送您的问题/评论< / option> 
< / select> 
名称：
< input type =textname =last-name>< / input> 
评论/问题：< / br> 
< textarea id =commentsname =questions-fieldrows =5cols =27>< / textarea> 
< br /> 
< input type =submitname =submitvalue =Submit>< / input> 
  

 <$ c $（$（$（$（$））$（$）$（$） '#contact select [name =select-question]'）。val（）=='question'）{
 $（'＃comments'）。show（）; 
} else {
 $（'＃comments'）。hide（）; 
} 
}）; 
}）; 
  

我也发布到JS小提琴： http://jsfiddle.net/7wzUG/5/

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

解决方案

包含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/

I have a form that has a dropdown menu, a few text fields and a text area. I would like the form to hide the text area if one of the options from the dropdown menu is selected.

Here is my code:

<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();
        }
    });
});

I have also posted to JS fiddle: http://jsfiddle.net/7wzUG/5/

I'm very new to JQuery, and I am not sure why this does not work. Thanks for any help.

解决方案

Include jQuery AND add "option:selected" to your selector:

$(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();
        }
    });
});

You also need to hide the comments on load via CSS style and place the label inside the comments div container, so that also the label is invisible when appropriate.

Here's the working fiddle: http://jsfiddle.net/7wzUG/9/

这篇关于使用Jquery根据选定的下拉选项隐藏表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！