Having Trouble - Simple thing..

Printable View

05-09-2008, 05:14 PM
djinn80

Having Trouble - Simple thing..

I'm trying to make a script so if you select a value in the select box of either 1, 2 or 3 differnet Divs will show. Ideally i want all 3 divs to show if you select 3, or 2 to show if you select 2, or only 1 to show if you select 1.

Here is a sample of the script:

<script language="JavaScript"></script>

The select box:

<select name="items1" class="select" id="items1" onChange="UpdateList(this);">
<% c=3

for i = 1 to c %>
<option><%=i%></option>
<%Next%>
</select>

Sample div:

<div id="Products_<%=i%>" style="display:none;">text here.
</div>

Any help would be greatly appreciated!
05-09-2008, 07:52 PM
jscheuer1

That looks like some asp you've got thrown in there with your javascript. A link to the live page would be useful to make sure that the markup is being generated as expected:

Please post a link to the page on your site that contains the problematic code so we can check it out.

I'll have a bit more of a look at this to see if the javascript part seems workable or not 'as is'. In any case, this should be easy enough to do.
05-09-2008, 08:12 PM
jscheuer1

Something like this would work out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Select Divs - Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .prods div { display:none; } </style> <script type="text/javascript">  </script> </head> <body> <div> The select box:<br> <select name="items1" class="select" id="items1" onchange="UpdateList(this);"> <option>Select </option> <option>1</option> <option>2</option> <option>3</option> </select><br> </div> <div> divisions:<br> </div> <div class="prods"> <div id="Products_1">text 1 here. </div> <div id="Products_2">text 2 here. </div> <div id="Products_3">text 3 here. </div> </div> </body> </html>

But, at that rate, the function could be simplified:

Code:

function UpdateList(x) { for (var i = 3; i > 0; --i) document.getElementById("Products_"+i).style.display = "none"; for (var i = x.selectedIndex; i > 0; --i) document.getElementById("Products_"+i).style.display = "block"; }

or even:

Code:

function UpdateList(x) { for (var i = x.options.length-1; i > 0; --i) document.getElementById("Products_"+i).style.display = "none"; for (var i = x.selectedIndex; i > 0; --i) document.getElementById("Products_"+i).style.display = "block"; }

In the last version, the script would calculate everything on the basis of the number options that were in the select.
05-09-2008, 11:03 PM
djinn80

Awesome thanks

Thanks, I used the 2nd option and worked well!

You guys make it look so easy :)
05-10-2008, 01:56 AM
jscheuer1

Simpler still:

Code:

function UpdateList(x) { for (var s = x.selectedIndex, i = x.options.length-1; i > 0; --i) document.getElementById("Products_" + i).style.display = i <= s? "block" : "none"; };
05-11-2008, 08:22 PM
matthewbluewars

<script language="JavaScript"></script>