Toggle a hidden div when a particular dropdown option is selected/de-selected

Question

Hey everyone, I had a quick question that should be easy for someone who is experienced in Jquery and Javascript.

I'd like to have a hidden div that is below a drop-down field in my form. When one particular option is selected, the hidden div is displayed. I'd also like it to disappear when any other option is selected. I'm using this as a warning for the user since that option will run some specific db related functions.

Can anyone give me some hints on how to get this started?

Thanks.

Answer 1

Here you go. (online demo http://jsfiddle.net/wwTxw/ )

HTML:

<select id="select">
    <option value="1">111</option>
    <option value="2">222</option>
    <option value="3">333</option>
</select>

<div id="warning" style="display:none">NO!!!</div>

jQuery Code;

$(function() {
    $('#select').change(function(){
        if ($(this).val() == "2") {
            $('#warning').show();
        } else {
            $('#warning').hide();
        }
    });
});