CODEWITHSUNDEEP
javascriptjqueryhtmlformsdrop-down-menu
TotalNewbie
TotalNewbie

Reputation: 1024

Jquery Dropdown dynamic Form Issue

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??

Upvotes: 1

Views: 66

Answers (2)

Vishal Khode
Vishal Khode

Reputation: 841

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();
});

Upvotes: 1

MrCode
MrCode

Reputation: 64526

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();

Upvotes: 1

Related Questions