javascript - jQuery show/hide based on select dropdown not working as expected -

i'm attempting show/hide <div>'s based on values chosen select drop-down menu.

html

<select id="selreport">   <option value="report one">report one</option>   <option value="report two">report two</option>   <option value="report three">report three</option>   <option value="report four">report four</option> </select  <div id="report one" class="description">   <p>...</p> </div> <div id="report two" class="description">   <p>...</p> </div> 

i'm using following jquery snippet hide <div>'s , show them based on selected in drop-down menu:

jquery

$('.description').hide(); $('#selreport').change(function () {   $('description').hide()   $("[id='" + this.value + "'").show(); });     

when new option selected drop-down menu previous <div> displayed doesn't hide. stays displayed , don't know why. can offer suggestion?

first change ids dont have spaces (space invalid character ids) follows:

<div id="report-one" class="description">   <p>...</p> </div> <div id="report-two" class="description">   <p>...</p> </div> 

and second (little typo here :)) change:

$('description').hide(); 

to:

$('.description').hide();