Question

125

jQuery Dropdown Show/Hide div

rated 0 times [ 132] [ 7] / answers: 1 / hits: 26896 / 11 Years ago, fri, november 15, 2013, 12:00:00

I really don't know much about javascript, but I am trying to use the following code which works well. The problem I am having is if I add a ... or : at the end of the Choose option, the code no longer works.

http://jsfiddle.net/fj63g/58/

HTML:

<select id=dropDown>

    <option>Choose</option>

    <option value=div1>Show Div 1</option>

    <option value=div2>Show Div 2</option>

</select>



<div id=div1 class=drop-down-show-hide>div 1</div>

<div id=div2 class=drop-down-show-hide>div 2</div>

Script:

$('.drop-down-show-hide').hide();



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

$(this).find(option).each(function()

{

$('#' + this.value).hide();

});

    $('#' + this.value).show();



});

Any help is much appreciated! Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackie

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jackie questions

1 Is it possible to get the selector from a locator object in playwright?

Thu, Apr 28, 22, 00:00, 2 Years ago

1 Upload and preview Video in React

Sat, Sep 18, 21, 00:00, 3 Years ago

1 React countdown timer using new Date()

Wed, Jul 14, 21, 00:00, 3 Years ago

1 How to style the button in bootstrap vue dropdown like a circle

Thu, Oct 22, 20, 00:00, 4 Years ago

1 Vue reactivity, prevent re-rendering component on prop update with input v-model

Wed, Sep 2, 20, 00:00, 4 Years ago

View All

answered 11 Years ago dakotahs · Accepted Answer

Try this instead:

$('.drop-down-show-hide').hide();



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

    $('.drop-down-show-hide').hide()    

    $('#' + this.value).show();



});

Updated fiddle

OR

To fix your code, Just add value= to the Choose option

<select id=dropDown>

    <option value=>Choose...</option>

    <option value=div1>Show Div 1</option>

    <option value=div2>Show Div 2</option>

</select>

<div id=div1 class=drop-down-show-hide>div 1</div>

<div id=div2 class=drop-down-show-hide>div 2</div>

Here is an updated fiddle fixing your code