Using chain select to show/hide div

[troopa]

Hi, been trying to work this out all day. Basically my aim is to have a country/state chain select that will show the div relevant to the state when you select it.

So if you selected America from the first drop down box it would then show American States in the second drop down box. If you pick a state then it will show a div for that state


(show hide div without chain select)

<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>

<form id="FormName1" action="blah.php" method="get" name="FormName1">
<select name="selectName" size="1" onchange="showDiv(this.value);">
<option value="">Choose One...</option>
<option value="one">first1</option>
<option value="two">second2</option>
<option value="three">third3</option>
</select>
</form>

</div>

</div>

<div id="storesContent">

<div id="one" class="hiddenDiv"> DIV1 </div>
<div id="two" class="hiddenDiv"> DIV2 </div>
<div id="three" class="hiddenDiv">DIV3</div>

This is the code I am using with 1 dropdown box, which shows a div when you make a selection from the dropdown using an onchange="showDiv(this.value);"

That works fine, trying to combine this with a chain select like:
http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

So when you have picked the last chain option instead of giving an alert or visiting a url it will change the div contents like in the non chain select example above.

I am unfortunately not good with javascript at all, I was sure someone would have done something like this before, however cannot find any examples of it.

[rangana]

It's basically this few code:


document.getElementById(divName).style.display='';


Add this on showDiv function to see it working.

[troopa]

I added this

onchange="showDiv(this.value);"
to the second select tag.

This works perfectly now in firefox but does not work at all in IE6/7

You can see it on http://www.troopa.za.net/content/stores/
Pick South Africa from First Drop Down, KZN from 2nd and text should
appear in the right block.

I tried this to see where the probem was (SA1B1 being one of the hidden div id's)

onchange="showDiv('SA1B1');"
This works in ie and ff, which means that the (this.value) is not being applied correctly in IE.

Any suggestions ? When I started this I thought it would be an easy layout, I was wrong.

[rangana]

I don't know the reason behind this, I might miss something, but I just can't distinguish what causes it to fail on IE.

But the fix is by removing highlighted:


<select id="SndSecondCombo" name='SndSecondCombo' MCEmptyOption='--- Select Region ---' MCDefaultOption='--- Select Region ---' onchange="showDiv(this.value);">
</select>


And make use of this script instead:


window.onload=function(){
var lastDiv = "";
document.getElementById('SndSecondCombo').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}


Tested on IE, FF, Safari and Opera and works fine.

Hope it helps.

[troopa]

Works perfectly, thank you so much rangana, doubt I would have got there myself.