drop down menu - Show/hide div with JQuery -


i have code:

$(document).ready(function() {                 $('#viewall').hide();                  $('#viewproductiframe').hide();                  $('#viewingredientiframe').hide();              $('#viewpackagingiframe').hide();               $.viewmap = {                 'viewempty' : $('#viewempty'),                 'viewall' : $('#viewall'),                 'viewproductiframe' : $('#viewproductiframe'),                 'viewingredientiframe' : $('#viewingredientiframe'),                 'viewpackagingiframe' : $('#viewpackagingiframe')             };              $('#viewselector').change(function() {                 // hide                 $.each($.viewmap, function() { this.hide(); });                 // show current                 $.viewmap[$(this).val()].show();             });          }); 

it should show/hide set of divs. viewproductiframe div appears. @ first had 4 divs without iframes showing tables database. put content of these divs "viewall" , added "viewproductiframe" , other two. change apparently broke code , can't find reason.

my dropdown menu:

<select name="viewselector" id="viewselector">                         <option name="viewempty" value="viewempty">select option</option>                         <option name="viewall" value="viewall">all</option>                         <option name="viewproductiframe" value="viewproductiframe">products</option>                         <option name="viewingredientiframe" value="viewingredientiframe">ingredients</option>                         <option name="viewpackagingiframe" value="viewpackagingiframe">packaging</option>                     </select> 

the div shows up:

<div id="viewproductiframe" name="viewproductiframe">                     <h2>product</h2>                     <iframe src="products.php" class="displayframe" />                 </div> 

another iframe div, remains invisble:

<div id="viewingredientiframe" name="viewingredientiframe">                         <h2>ingredients</h2>                         <iframe src="ingredients.php" class="displayframe" />                     </div> 

does have idea problem is?

try code below

1) set common class divs added class common example

<div id="viewproductiframe" name="viewproductiframe" class="common">                     <h2>product</h2>                     <iframe src="products.php" class="displayframe" />                 </div>   <div id="viewingredientiframe" name="viewingredientiframe" class="common">                     <h2>ingredients</h2>                     <iframe src="ingredients.php" class="displayframe" />                 </div> 

jquery be

$(document).ready(function() {     $(".common").hide();     $('#viewselector').change(function() {                     $(".common").hide(); // hide divs                      var id = $(this).find("option:selected").val(); // current val                     $("#" + id).show() // show current div id       });  }); 

Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -