Hiding selected divs

[roland-d]

Hello all,

Toggling divs is a popular subject and I have found plenty of
information and was able to make it work. There is only 1 thing I am
still stuck with for quite some time.

I have a dropdown menu and when I select a date from this menu it
displays another select box with times for that day. When I select
another date another dropdown is shown with times. The problem is now
that my page shows two dropdown menus with times.

The dropdown with dates has several dates, so the dropdowns with times
that show increases all the time. The question is how do I hide 1 time
dropdown div as I select another one?

My code:
<form name="hokatexafspraak" method="post"
action="hokatexafspraak.php"><select name="afspraakdatum"
onchange="javascript: dropdown(this); return false;"><option
value="">Kies datum...</option><option value="1182117600">Maandag 18
Juni 2007 (week 25)</option>
<option value="1182290400">Woensdag 20 Juni 2007 (week 25)</option>
</select><div id="1182117600" style="display: none;"><select
name="tijd1182117600"><option value="">Kies tijd...</option><option
value="09.00">09.00</option>
<option value="12.00">12.00</option>
<option value="15.00">15.00</option>
</select></div><div id="1182290400" style="display: none;"><select
name="tijd1182290400"><option value="">Kies tijd...</option><option
value="09.00">09.00</option>

<option value="12.00">12.00</option>
<option value="15.00">15.00</option>
</select></div></form><div id="div_1"></div><SCRIPT TYPE="text/
javascript">
<!--
function dropdown(mySel) {
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
showdiv = document.getElementById(myVal);
showdiv.style.display="block";
}
//--></SCRIPT>

Thanks in advance to solve this last mystery

 

[roland-d]

Hello all,

Toggling divs is a popular subject and I have found plenty of
information and was able to make it work. There is only 1 thing I am
still stuck with for quite some time.

I have a dropdown menu and when I select a date from this menu it
displays another select box with times for that day. When I select
another date another dropdown is shown with times. The problem is now
that my page shows two dropdown menus with times.

The dropdown with dates has several dates, so the dropdowns with times
that show increases all the time. The question is how do I hide 1 time
dropdown div as I select another one?

My code:
<form name="hokatexafspraak" method="post"
action="hokatexafspraak.php"><select name="afspraakdatum"
onchange="javascript: dropdown(this); return false;"><option
value="">Kies datum...</option><option value="1182117600">Maandag 18
Juni 2007 (week 25)</option>
<option value="1182290400">Woensdag 20 Juni 2007 (week 25)</option>
</select><div id="1182117600" style="display: none;"><select
name="tijd1182117600"><option value="">Kies tijd...</option><option
value="09.00">09.00</option>
<option value="12.00">12.00</option>
<option value="15.00">15.00</option>
</select></div><div id="1182290400" style="display: none;"><select
name="tijd1182290400"><option value="">Kies tijd...</option><option
value="09.00">09.00</option>

<option value="12.00">12.00</option>
<option value="15.00">15.00</option>
</select></div></form><div id="div_1"></div><SCRIPT TYPE="text/
javascript">
<!--
function dropdown(mySel) {
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
showdiv = document.getElementById(myVal);
showdiv.style.display="block";}

//--></SCRIPT>

Thanks in advance to solve this last mystery

Ok, got it figured out. Use getElementsByTags to hide selected divs.