Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Please help! drop-down list + set text of layer + switch statement que 1

Status
Not open for further replies.
floofy7

floofy7

Programmer
Jul 24, 2006
11
US
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:

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 &lt;br&gt; and some text after the break')
break
case "ak":
MM_setTextOfLayer('turnip','','Alabama &lt;br&gt; and some text after the break')
break
case "az":
MM_setTextOfLayer('turnip','','Alabama &lt;br&gt; 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>
 
Sort by date Sort by votes
Try this:

The change is that the onchange event now sends the actual AL portion of value="AL" to the function, and the function receives the string rather than a handle to the dropdown, and the switch is based on the function argument, not from a value extracted from the form (theoretically the same, but cleaner).

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(the_text)
{
	switch (the_text) {
		case "al":
		MM_setTextOfLayer('turnip','','Alabama1 &lt;br&gt; and some text after the break')
		break
		case "ak":
		MM_setTextOfLayer('turnip','','Alabama2 &lt;br&gt; and some text after the break')
		break
		case "az":
		MM_setTextOfLayer('turnip','','Alabama3 &lt;br&gt; 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.value)">
<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>
 
Upvote 0 Downvote
Ah, I see. The only problem is that it's literally rendering the HTML. I've run into this problem several times.
 
Upvote 0 Downvote
Yeah, I noticed that too, but it was dummy text, so I didn't look at it any closer. You may want to consider trying something like this as well:

Code: 
<script>
function showhide(d) {
	var obj=document.getElementById(d);
	if(obj.style.display=='block') {
		obj.style.display='none';
	} else {
		obj.style.display='block';
	}
}
</script>

<div id="block1" style="display:none;">
text 1<br>text2<br>
</div>
<div id="block2" style="display:none;">
text 1<br>text2<br>
</div>
<div id="block3" style="display:none;">
text 1<br>text2<br>
</div>
<div id="block4" style="display:none;">
text 1<br>text2<br>
</div>

<select name="asdfasdf" onchange="showhide(this.value)">
	<option value="block1"> show/hide block1
	<option value="block2"> show/hide block2
	<option value="block3"> show/hide block3
	<option value="block4"> show/hide block4
</select>

The above was adapted from something more akin to a tree view or accordian style menu. You would need to rig it up so that when you choose a new selection from teh dropdown, it hides the previous one, which the above does not do. But you can see that the DIV tag includes style="display:none;" which causes it not to render, and then you can force it to turn on/off using the function like "showhide('block1');" I've never had very good luck writing directly to layers. It seems like there are too many things that can go wrong. But I my mileage tends to vary, if you know what I mean.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
299
nanbread
nanbread
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
768
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
390
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
356
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
320
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top