Using Jquery to hide form elements based on selected dropdown option

问题

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.

回答1:

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/

回答2:

you just have to include jQuery

Here's the corrected one: http://jsfiddle.net/edgarinvillegas/7wzUG/7/

Cheers

回答3:

Here is the same code that Simon Steinberger & Edgar Villegas Alvarado but with the ternary operator

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

As others said, add JQuery.

What you could, also, do is add a class that will hide the comments text area, and then toggle it on/off based on dropdown selection.

来源：https://stackoverflow.com/questions/21007591/using-jquery-to-hide-form-elements-based-on-selected-dropdown-option

标签

javascript

jquery

forms

show-hide