[eluser]Dave Stewart[/eluser]
You shouldn't really be hard-coding the select id into the function. It's far more flexible to pass a reference to the dropdown in the function call.
jQuery is also a good way to go, but you need to know a little JS to get to grips with it.
Bung this in your HTML page and see how you get on.
Code:
<script type="text/javascript">
function updateDivs(select){
// grab the div to be shown
var selectedItem = select.options[select.selectedIndex];
var nextDiv = document.getElementById(selectedItem.value);
// has this function been run before? (this block will only run once per page load)
// if not, the global variable "lastDiv" will be undefined, so instead, we're going to
// choose last div to be the first option in the select
if(window.lastDiv == undefined){
var firstItem = select.options[0];
window.lastDiv = document.getElementById(firstItem.value);
}
// hide the last div
if(window.lastDiv != undefined){
window.lastDiv.style.display = 'none';
}
// show the next div
if(nextDiv != undefined){
nextDiv.style.display = 'block';
}
// update a global variable to remember the last div that was shown
// so it can be hidden when the next one is selected.
// generally in OO frameworks, globals are not the best solution, but for a
// quick and dirty solution, it will do here
window.lastDiv = nextDiv;
}
</script>
<div id="divs">
<div id="first">Number 1</div>
<div id="second" style="display:none">Number 2</div>
<div id="third" style="display:none">Number 3</div>
</div>
<form id="form1" name="form1" method="post" action="">
<select name="select" id="select" onchange="updateDivs(this)">
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
</select>
</form>
Cheers,
Dave