Question

I’m trying to setup a select dropdown from which, using jQuery, each option will display a specific DIV. I have most of the functionality working, I just can’t get the displayed DIV to hide once another option is selected. This is my code so far:

<select id="contact-location">
    <option value="">-- Select Location --</option>
    <option value="sydneyBranch">Sydney</option>
    <option value="melbourneBranch">Melbourne</option>
</select>

<div id="sydneyBranch" style="display:none">
    CONTENT
</div>

<div id="melbourneBranch" style="display:none">
    CONTENT
</div>


$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);

        if($(this).val(location)) {
            div.show();
        } else {
            div.hide();
        }
    });
});

Answer 1

Try this,

Live Demo

 $(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);

        $('div').hide();
            div.show();

    });
});​

EDIT

Currently the javascript will hide all the divs, we can prevent this if we assign some class to participating divs and replace $(‘div’).hide(); statement with $(‘.somecssClass’).hide();

<div id="sydneyBranch" class="somecssClass" style="display:none">
    CONTENT
</div>

<div id="melbourneBranch" class="somecssClass" style="display:none">
    CONTENT
</div>