Form Menu Dynamic Show/Hide

[icdover]

Im trying to display State - Town relations where one Dropdown menu of the form holds the States and then based on the state that is chosen, causes the correct Town Dropdown menu to display. I believe what i have should work, but i must have missed something. Any help would be great.. Thanks.

Javascript:

<script language="javascript">
			function showField()
			{
				var choice = document.data.sid.options.value;

				if(choice == "1")
				{
					document.getElementById('SID2-div').style.display = "none";
					document.getElementById('SID3-div').style.display = "none";
					document.getElementById('SID4-div').style.display = "none";
					document.getElementById('SID5-div').style.display = "none";
					document.getElementById('SID1-div').style.display = "block";
				}

				else if(choice == "2")
				{
					document.getElementById('SID2-div').style.display = "block";
					document.getElementById('SID3-div').style.display = "none";
					document.getElementById('SID4-div').style.display = "none";
					document.getElementById('SID5-div').style.display = "none";
					document.getElementById('SID1-div').style.display = "none";
				}

				else if(choice == "3")
				{
					document.getElementById('SID2-div').style.display = "none";
					document.getElementById('SID3-div').style.display = "block";
					document.getElementById('SID4-div').style.display = "none";
					document.getElementById('SID5-div').style.display = "none";
					document.getElementById('SID1-div').style.display = "none";
				}
				
				else if(choice == "4")
				{
					document.getElementById('SID2-div').style.display = "none";
					document.getElementById('SID3-div').style.display = "none";
					document.getElementById('SID4-div').style.display = "block";
					document.getElementById('SID5-div').style.display = "none";
					document.getElementById('SID1-div').style.display = "none";
				}
				
				else if(choice == "5")
				{
					document.getElementById('SID2-div').style.display = "none";
					document.getElementById('SID3-div').style.display = "none";
					document.getElementById('SID4-div').style.display = "none";
					document.getElementById('SID5-div').style.display = "block";
					document.getElementById('SID1-div').style.display = "none";
				}
				else if(choice == "")
				{
					document.getElementById('SID2-div').style.display = "none";
					document.getElementById('SID3-div').style.display = "none";
					document.getElementById('SID4-div').style.display = "none";
					document.getElementById('SID5-div').style.display = "none";
					document.getElementById('SID1-div').style.display = "none";
				}
			}
		</script>

Form:

<form enctype="multipart/form-data" action="<?=$_SERVER['PHP_SELF']?>" method="post" name="data">
					Restaurant Name:<br/>
					<input type="text" name="name" value="" size="30" maxlength="50"><br/><br/>
					State:<br/>
					<select name="sid" size="1" onchange="showField()">
						<option value='' selected>Select a State</option>
						<? while ($stateoption = mysql_fetch_array($states)) {
							$sid = $stateoption['SID'];
							$sname = htmlspecialchars($stateoption['StateName']);
							echo("<option value='$sid'>$sname</option>\n");
							}
						?> </select><br/><br/>
					Town:<br/>
					<div style="display: none;" name="SID1-div" id="SID1-div">
					<select name="tid" size="1">
						<?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="1"');
						  while ($townoption = mysql_fetch_array($towns)) {
							$tid = $townoption['TID'];
							$tname = htmlspecialchars($townoption['TownName']);
							echo("<option value='$tid' selected>$tname</option>\n");
							}
						?> </select>
					</div>
					<div style="display: none;" name="SID2-div" id="SID2-div">
					<select name="tid" size="1">
						<?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="2"');
						  while ($townoption = mysql_fetch_array($towns)) {
							$tid = $townoption['TID'];
							$tname = htmlspecialchars($townoption['TownName']);
							echo("<option value='$tid' selected>$tname</option>\n");
							}
						?> </select>
					</div>
					<div style="display: none;" name="SID3-div" id="SID3-div">
					<select name="tid" size="1">
						<?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="3"');
						  while ($townoption = mysql_fetch_array($towns)) {
							$tid = $townoption['TID'];
							$tname = htmlspecialchars($townoption['TownName']);
							echo("<option value='$tid' selected>$tname</option>\n");
							}
						?> </select>
					</div>
					<div style="display: none;" name="SID4-div" id="SID4-div">
					<select name="tid" size="1">
						<?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="4"');
						  while ($townoption = mysql_fetch_array($towns)) {
							$tid = $townoption['TID'];
							$tname = htmlspecialchars($townoption['TownName']);
							echo("<option value='$tid' selected>$tname</option>\n");
							}
						?> </select>
					</div>
					<div style="display: none;" name="SID5-div" id="SID5-div">
					<select name="tid" size="1">
						<?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="5"');
						  while ($townoption = mysql_fetch_array($towns)) {
							$tid = $townoption['TID'];
							$tname = htmlspecialchars($townoption['TownName']);
							echo("<option value='$tid' selected>$tname</option>\n");
							}
						?> </select>
					</div><br/><br/>
....

Sorry about the formatting.

[Saturn]

var choice = document.data.sid.options.value;

options is an array, it doesn't have a value property. var choice = document.data.sid.value; is probably what you want.

[icdover]

Thanks alot, that fixed my problem. Hehe silly error.