Hi there, I have a website which is made using ASP On one of the page I am required to show a lot of data.... The idea is to have a drop down menu with options like Product 1, Product 2 ... Product 20 Once the user selects say Product 1 some data should be displayed below the drop down menu... without reloading the page.. . Can this be done... and where can i find some codes for it...
hi, You can do this with jquery. You can for example populate you divs with your data, call the hide() function when your page loads and show only the first one, and then use the .change() function on your select. here is an example, just adapt it to your case: <html> <head> <style> body{ } .all{ width:200px; height:200px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function () { $('#selector').change(function() { $('.all:visible').hide(); var id = "div"+$(this).val(); $(document.getElementById(id)).show(); }); }); </script> </head> <body> <select id="selector"> <option value="1">div 1</option> <option value="2">div 2</option> </select> <div> <div class="all" id="div2" style="position:absolute;z-index:2;background:green;"></div> <div class="all" id="div1" style="position:absolute;z-index:1;background:red;"></div> </div> </body> </html> Code (markup):
You can also try using ASP visible property on a Label, a TextBox or a TextArea control. Refer this Hope this helps!
Thanks for posting. Well it all sounds a bit too technical for me... I am a designer and i am very bad with codes... But i gave it a try and its working real good. So basically i just need to add my data inside <div> and assign values... will try with the actual data and let you know.
that's right, the javascript and css won't change at all. Just use a loop to create your select and your div if you use some php, it should look like this: $stringSelect = "<select id=\"selector\">"; $stringDiv = "<div>"; $nbDiv=21;//if you have 20 divs for($i=1;$i<$nbDiv;$i++) { $stringSelect .= "<option value=\"".$i."\">div 1</option> "; $zindex = $nbDiv-$i; $dataToDisplay = "your data"; //you can use this to populate your div $stringDiv .= "<div class=\"all\" id=\"div".$i."\" style=\"position:absolute;z-index:".$zindex.";\">".$dataToDisplay."</div>"; } $stringSelect .= "</select>"; $stringDiv .= "</div>"; echo $stringSelect.$strinDiv; PHP: dind't try it but it should work. Let me know if you have some problems with it
I tried this code... <html> <head> <style> body{ } .all{ width:200px; height:200px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function () { $('#selector').change(function() { $('.all:visible').hide(); var id = "div"+$(this).val(); $(document.getElementById(id)).show(); }); }); </script> </head> <body> <select id="selector"> <option value="1">Blank</option> <option value="2">201</option> <option value="3">204Cu</option> </select> <div> <div class="all" id="div1" > </div> <div class="all" id="div2" >a</div> <div class="all" id="div3" >b</div> </div> </body> </html> Code (markup): Is there a way to hide the data of div2 and div3 on the first instance... I mean the first instance should be Blank and then when I select div2 .. the data of div2 shd be visible.. select div3 then the data of div3 shd be visible..
yes, just add the following lines <script type="text/javascript" language="javascript"> $(document).ready(function () { $('.all').hide(); // this will hide all the div with the class all $('#div1').show(); //you can add this line if you decide to display something in the first div // the following is only called when your selector value changes $('#selector').change(function() { $('.all:visible').hide(); var id = "div"+$(this).val(); $(document.getElementById(id)).show(); }); }); </script> Code (markup):