Want to hide and show an element using select tag in jquery

Question

I am new to jQuery. I can hide but can't show. I want to hide and show an element with select tag.

If i choose option value="something" #hide must be hidden and if I choose something2 (another option in select tag) #hide must be shown.

div element must be shown and hidden every time I choose options in select tag.

<option value="something"></option>
<option value="something2"></option>

<div id="hide"></div>

Answer 1

Quite easy . Follow this :

HTML:

<select class = 'select'>
<option value="something">1</option>
<option value="something2">2</option>
</select>

<div id="hide"> Help</div>

JS:

$('.select').on('click', function() {
    $('#hide').toggle(this.value=='something');
});

This uses the toggle method and finds the class select of the selection choice.

Find the working example here : http://jsfiddle.net/7H4EW/

Answer 2

toggle() hides and shows an element based on a condition, like what the value of the select is:

$('select').on('change', function() {
    $('#hide').toggle(this.value=='something');
});

FIDDLE