Question

I have a drop-down and need to show hidden div that corresponds to the selected option and do nothing when a blank option is selected:

$("#hiddenDiv1").hide();
$("#hiddenDiv2").hide();

$('#mySelector').change(function() {

});

<select id="mySelector">
    <option>select one option</option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
</select>

<div id="hiddenDiv1">aaaaa</div>
<div id="hiddenDiv2">bbbbb</div>

That’s as far as I was able to get on my own.

Answer 1

An alternative to Emmanuel’s answer:

var $div1 = $('#hiddenDiv1'),
    $div2 = $('#hiddenDiv2'),
    $both = $div1.add($div2);

$('#mySelector').change(function() {
    var $this = $(this),
        val = $this.val();

    switch (val)
    {
        case 'option1':
            $div1.show();
            $div2.hide();
            break;

        case 'option2':
            $div1.hide();
            $div2.show();
            break;

        default:
            $both.hide();
    }
});

Edit

Since there seems to be some desire to turn this into a bit of code golf, here’s my reduced-line-count version (no changes to the OP’s markup):

var $hiddenDivs = $('div[id^=hiddenDiv]').hide();
$('#mySelector').change(function() {
    $hiddenDivs.hide().filter('[id$=' + $(this).val().substring(6) + ']').show();
});

jsfiddle demo →