w424637 Posted December 10, 2009 Share Posted December 10, 2009 Hi I have a query which outputs 9 rows: A 10 A 11 A 12 B 21 B 22 B 23 C 31 C 32 C 33 I have put these in a table in the usual way using repeat region etc. I also have built a select box that has A B C. I would like to know how to use javascript to show and hide the rows of my report dependant on the choice made. ie User chooses A and only the rows with A in the first field are shown etc. Without going back and requering the server. Can this be done? Any help or pointers would be very welcome thanks Simon Quote Link to comment Share on other sites More sharing options...
w424637 Posted December 10, 2009 Author Share Posted December 10, 2009 I tried to get there but the below does soemthing but not quite right: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <html> <script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script> <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" /> <head> <script> function toggle() { if( document.getElementById("hidethis").style.display=='none' ){ document.getElementById("hidethis").style.display = ''; }else{ document.getElementById("hidethis").style.display = 'none'; } } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <span id="spryselect1"> <label>hh <select onchange="toggle();" name="hh" id="hh"> <option>A</option> <option>B</option> <option>C</option> </select> </label> <span class="selectRequiredMsg">Please select an item.</span></span> </form> <table border="1"> <tr id="hidethis"> <td>A</td> </tr> <tr id="hidethis"> <td>B</td> </tr> <tr id="hidethis"> <td>C</td> </tr> </table> <script type="text/javascript"> <!-- var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1"); //--> </script> </body> </html> </html> Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted December 10, 2009 Share Posted December 10, 2009 Remember - an id is supposed to be unique. It doesn't make any sense for multiple elements to have the same id. JavaScript knows this, and will stop at the first instance of the id you tell it to find. You have a couple of options: 1. Give each item that should be toggled its own unique id. 2. Give each group of items that should be toggled (i.e., all 'A' items, all 'B' items, etc.) their own class name. How the script is written will depend on your choice. Quote Link to comment Share on other sites More sharing options...
optikalefx Posted December 14, 2009 Share Posted December 14, 2009 so using jQuery give each select box an attribute called div and make that equal to the ID of the box to hide <select div='mydiv' onchange="myFunction(this)";> <div id='mydiv'></div> function myFunction(this) { var which = $(this).attr("div"); $("#"+which).hide(); } something like that. just be clever with attributes. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.