Having Trouble - Simple thing..

**djinn80** · 05-09-2008, 05:14 PM

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!

**jscheuer1** · 05-09-2008, 07:52 PM

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.

**jscheuer1** · 05-09-2008, 08:12 PM

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">
<!--
function UpdateList(x) {
for (var i = 3; i > 0; --i)
document.getElementById("Products_"+i).style.display = "none";
if (x.selectedIndex == 1) { 
document.getElementById("Products_1").style.display = "block";
}
if (x.selectedIndex == 2) { 
document.getElementById("Products_1").style.display = "block";
document.getElementById("Products_2").style.display = "block";
}
if (x.selectedIndex == 3) { 
document.getElementById("Products_1").style.display = "block";
document.getElementById("Products_2").style.display = "block";
document.getElementById("Products_3").style.display = "block";
}

}
window.onload=function(){UpdateList(document.getElementById('items1'));};
// -->
</script>

</head>
<body>
<div>
The select box:<br>
<select name="items1" class="select" id="items1" onchange="UpdateList(this);">
<option>Select&nbsp;</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.

**djinn80** · 05-09-2008, 11:03 PM

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

You guys make it look so easy

**jscheuer1** · 05-10-2008, 01:56 AM

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";
};

**matthewbluewars** · 05-11-2008, 08:22 PM

Thread: Having Trouble - Simple thing..

Thread Tools

Search Thread

Having Trouble - Simple thing..

Awesome thanks

Bookmarks

Bookmarks

Posting Permissions