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
Post a Comment