PDA

View Full Version : 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"><!--
function UpdateList(x) {
if (x.options[x.selectedIndex].value == "1") {
document.getElementById("Products_1").style.display = "";
}
if (x.options[x.selectedIndex].value == "2") {
document.getElementById("Products_2").style.display = "";
}
if (x.options[x.selectedIndex].value == "3") {
document.getElementById("Products_3").style.display = "";
}

}
//--></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:


<!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:


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:


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:


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
<script language="JavaScript"><!--
function UpdateList(x) {
var xValue = x.options[x.selectedIndex].value;
document.getElementById("Products_" + xValue).style.display = "";
if (xValue == "3") {
for (var i = 1; i < 4; i++)
document.getElementById("Products_" + i).style.display = "";
}

}
//--></script>