PDA

Click to See Complete Forum and Search --> : [Resolved]Drop down boxes loading information

Kasracer
Jun 7th, 2005, 04:59 PM
I'm having trouble with drop down boxes with javascript.

What I want to do is sett a lot of classes in CSS to hidden and then change them to visible and the others to hidden depending on which item is selected in the drop down box but since I know almost nothing about java script, I can't find any tutorials on doing this. Everything I find is either extremely old coding style of goes into long and very complex setups.

Anyone got some links to put me in the right direction?
DeadEyes
Jun 8th, 2005, 05:23 AM
hopefully this will give you a start.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
DIV.showIt{display:block;}
DIV.hideIt{display:none;}
</style>
<script>
function changeIt()
{
var sel = document.frm.cbo.value;
var divs = document.getElementsByName("DivChange");
var i = 0;

for(i=0;i<divs.length;i++){
divs[i].style.display = "none";
}
divs[sel].style.display = "block";
}
</script>
</head>
<body>
<form name="frm">
<select id="cbo" name="cbo" onchange="changeIt();">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>

<br>
<div id="DivChange" name="DivChange" class="showIt">
this is one<br>
<input type="text">
</div>
<div id="DivChange" name="DivChange" class="hideIt">
this is two<br>
<input type="text"><br>
<input type="text">
</div>
<div id="DivChange" name="DivChange" class="hideIt">
this is three<br>
<input type="button" value="click me">
</div>
</form>
</body>
</html>
Kasracer
Jun 8th, 2005, 03:50 PM
Thank you! Now if anyone has any links about adding and removing items from drop down boxes that would be awesome.

Basically I'm trying to use 3 seperate drop down boxes and selecting 1 thing in the 1st one changed what the 2nd and 3rd will contain.

javascript is confusion. I am searching google and can't find examples of what I'm looking for and when I find something that's related, 10 tutorials do it 10 different ways. I'm going to buy a book next week.

EDIT: Nevermind. I got it working :)