Jquery Dropdown dynamic Form Issue

Question

Hi all I have the following dropdown:

<div id='drop'>
    <select name='option'>
        <option value="Opt1">Opt1</option>
        <option value="Opt2">Opt2</option>
        <option value="Opt3">Opt3</option>
    </select>
</div>

<div id = 'NewContent'>
   //I need different content here depending on selection
   <div id="form1" style="display:none">Content of Form1</div>
   <div id="form2"style="display:none">Content of Form2</div>
   <div id="form3"style="display:none">Content of Form3</div>
</div>

I then have the following Javascript:

$('select[name="option"]').change(function() {
    $('#NewContent').find('*').hide();
   $('#'+$(this).val()).show();
});

this will work and display: Content of Form 1, 2 etc. when the user changes the dropdown.

However - the issue is, If I were to simply change one of the divs to include another - nothing displays on the screen, EG.:

  <div id = 'NewContent'>
       //I need different content here depending on selection
       <div id="form1" style="display:none"><div>Content of Form1</div></div> //this won't show  anything 
       <div id="form2"style="display:none">Content of Form2</div>
       <div id="form3"style="display:none">Content of Form3</div>
    </div>

is there a way to get around this issue??

Vishal Khode · Accepted Answer · 2014-04-11 14:18:52Z

1

The error is your html.. In your html, whenever there's any change in dropdown "$(this).val()" will always return "Opt1", "Opt2" or "Opt3" and in your html doesn't have any id's with "Opt1", "Opt2" or "Opt3". So, try this:

<div id='drop'>
    <select name='option'>
        <option value="form1">Opt1</option>
        <option value="form2">Opt2</option>
        <option value="form3">Opt3</option>
   </select>
</div>

<div id = 'NewContent'>
//I need different content here depending on selection
   <div id="form1" style="display:none">Content of Form1</div>
   <div id="form2"style="display:none" >Content of Form2</div>
   <div id="form3"style="display:none">Content of Form3</div>
</div>

$('select[name="option"]').change(function() {
   $('#NewContent').children().hide();
   $('#'+$(this).val()).show();
});

answered Apr 11, 2014 at 14:18

Vishal Khode

8412 gold badges9 silver badges15 bronze badges

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

3 Comments

TotalNewbie Over a year ago

this works however when the page is first loaded all of the Divs appear on the screen at the same time

Vishal Khode Over a year ago

How's that possible, have you added "style='display: none'" in all divs ?

Vishal Khode Over a year ago

Ok, check this plnkr, if this is what you want..Plnkr Link

MrCode · Accepted Answer · 2014-04-11 14:06:59Z

1

Only hide the children, not all descendants (*). By using find('*').hide() you are hiding all descendants and so when you come to show one of the divs, it will be shown but its children remain hidden.

$('#NewContent').children().hide();

answered Apr 11, 2014 at 14:06

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

1 Comment

TotalNewbie Over a year ago

Legend - thankyou very much I have been stuck on this for an age!

Collectives™ on Stack Overflow

Jquery Dropdown dynamic Form Issue

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related