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

Question

I'm attempting to show/hide <div>'s based on values chosen from a 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 the following jQuery snippet to hide the <div>'s and then show them based on what is selected in the drop-down menu:

jQuery

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

When a new option is selected from the drop-down menu the previous <div> that was displayed doesn't hide. It stays displayed and I don't know why. Can someone offer a suggestion?

Remove the spaces and it should work fine. An id can't have a space anyway. — putvande
– putvande, Commented Jun 2, 2015 at 19:19
Identifiers can't have spaces. You need to remove spaces from ID — Satpal
– Satpal, Commented Jun 2, 2015 at 19:22

taxicala · Accepted Answer · 2015-06-02 19:21:13Z

3

First change your ids to dont have any spaces (space is an invalid character for IDs) like 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();

answered Jun 2, 2015 at 19:21

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Smith Over a year ago

Wow, I can't believe I missed the typo. That was spot-on and fixed the whole thing. Thanks.

Claudio Redi · Accepted Answer · 2015-06-02 19:19:56Z

0

You have to change

$('description').hide() // tag selector

by

$('.description').hide() // class selector

Your code as it is, selects elements with tag description what is not what you're looking for

EDIT

Missed the Id thing (credit to @taxicala). Definitively you need to change your ids.

<select id="selReport">
  <option value="ReportOne">Report One</option>
  <option value="ReportTwo">Report Two</option>
  <option value="ReportThree">Report Three</option>
  <option value="ReportFour">Report Four</option>
</select

<div id="ReportOne" class="description">
  <p>...</p>
</div>
<div id="ReportTwo" class="description">
  <p>...</p>
</div>

answered Jun 2, 2015 at 19:19

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related