I want the user to select a state and then info about that state will populate a div. I got it to work if I have a list of state links. I want the states to be in a drop-down list though. Also, I'm not sure if my switch statement syntax is correct. Please help!
Here's my code:
Here's my code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_setTextOfLayer(objName,x,newText) { //v4.01
if ((obj=MM_findObj(objName))!=null) with (obj)
if (document.layers) {document.write(unescape(newText)); document.close();}
else innerHTML = unescape(newText);
}
//-->
<!--
function changetext(menuObj)
{ var the_text = document.forms[0].state_info.options[box.selectedIndex].value;
switch (the_text) {
case "al":
MM_setTextOfLayer('turnip','','Alabama <br> and some text after the break')
break
case "ak":
MM_setTextOfLayer('turnip','','Alabama <br> and some text after the break')
break
case "az":
MM_setTextOfLayer('turnip','','Alabama <br> and some text after the break')
break
default:
MM_setTextOfLayer('turnip','','Please select a state')
}
//-->
</script>
</head>
<body>
<form name="state_info">
<select size="1" onChange="javascript:changetext(this)">
<option selected="selected" value="0">Please select a state</option>
<option value="al">Alabama</option>
<option value="ak">Alaska</option>
<option value="az">Arizona</option>
</select>
</form>
<div id="turnip" name="turnip" style="border: 1px solid navy; height: 200px; width: 200px; padding: 3px;"></div>
</body>
</html>