I'd like to have a dropdown menu with three items in it, and a GO button. When the user clicks the GO button I want to unhide one of three <div> boxes, depending on the selection in the dropdown. I know this is ridiculously simple. Please don't tease me jquery with sliding/fading would be a bonus.
Would probably look like this; <script text="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#goBttn").click(function(){ $("#"+$("#dropDown").val()).fadeIn('slow'); //Hide other divs, dno if you need this! select = document.getElementById("dropDown").getElementsByTagName("option"); for(x=0;x<=select.length;x++) if($(select[x]).val()!=$("#dropDown").val()) $("#"+$(select[x]).val()).fadeOut('slow'); }); }); </script> <style type="text/css"> .hidden { display: none; } </style> <form onsubmit="javascript: return false;"> <select name='dropDown' id='dropDown'> <option value='one'>show div one</option> <option value='two'>show div two</option> <option value='three'>show div three</option> </select> <input type="submit" id="goBttn" value="Go" /> </form> <div id="one" class="hidden">This is div One</div> <div id="two" class="hidden">This is div Two</div> <div id="three" class="hidden">This is div Three</div> Code (markup):
Every now and then when I venture into the DP programming forums, I'm reminded why I signed up here in the first place. Thanks Sky AK47, it works perfectly. Exactly what I was after. +REPZ
This might be asking too much... but, would it be possible to have the selected div appear as a CSS popup, with a blanket over the page? Similar to a CPA gateway popup?
Yes, just style the DIV in CSS like that. =] This will probably help you: http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/ Demo: http://www.pat-burt.com/csspopup.html
Thank you again! One last thing, about the JavaScript you posted.... how can I put the dropdown and submit button inside a div that gets hidden when the submit button is pressed? This would be for if I'm not going to use a pop up, and just want to hide the dropdown from the page when the user clicks the submit button. e.g User makes the selection from the dropdown, and clicks the button. The dropdown and submit button disappear. The selected div shows.
<script text="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#goBttn").click(function(){ $("#"+$("#dropDown").val()).fadeIn('slow'); $("#formShow").fadeOut('slow'); //Hide other divs, dno if you need this! select = document.getElementById("dropDown").getElementsByTagName("option"); for(x=0;x<=select.length;x++) if($(select[x]).val()!=$("#dropDown").val()) $("#"+$(select[x]).val()).fadeOut('slow'); }); }); </script> <style type="text/css"> .hidden { display: none; } </style> <form id="formShow" onsubmit="javascript: return false;"> <select name='dropDown' id='dropDown'> <option value='one'>show div one</option> <option value='two'>show div two</option> <option value='three'>show div three</option> </select> <input type="submit" id="goBttn" value="Go" /> </form> <div id="one" class="hidden">This is div One</div> <div id="two" class="hidden">This is div Two</div> <div id="three" class="hidden">This is div Three</div> Code (markup): You could of course add a div with an ID around it instead of adding the ID tag to the form if you have more then just the form. Please do give the form a better name for the ID, couldn't come up with anything.