Forum Moderators: open

Message Too Old, No Replies

Using Select/Option with switch and innerHTML

Problem passing value to 'switch'

         

lexipixel

6:46 pm on Jun 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month


I have a long list of "things"... several hundred...

I want to have a select list that lets people find the "thing" and get back info related to it.

The problem I'm having with the code below appears to be in the passing of the OPTION VALUE to the JS switch function.

I know the OPTION VALUE, (a "1", "2", "3" or "" empty value) is being passed into the function as I can write it out with-

document.write('Var was:' + n);

So, the function has the right value... but the "switch()" function appears to be failing.

Clues?

PLEASE! DO NOT SUGGEST A COMPLETELY DIFFERENT METHOD OF DOING THIS... I know just about everything can be done 1000 different way. I have other functions and data related to this that are not going to be re-written.

Thanks.

============[ code ]===================

<html>
<head>
<script type="text/javascript" language="javascript">
function showtxt() {
var n = document.forms.myform.mylist.value;
switch (n) {
case 1:
document.getElementById('SizeName').innerHTML = '<b>Small</b>';
break
case 2:
document.getElementById('SizeName').innerHTML = '<b>Medium</b>';
break
case 3:
document.getElementById('SizeName').innerHTML = '<b>Large</b>';
break
default:
document.getElementById('SizeName').innerHTML = '<b>No Size</b>';
}

// uncomment next line to debug
// document.write('Var was:' + n);

}

</script>
</head>
<body>
<!-- Key for sizes: 1=Small 2=Medium 3=Large -->
<form id="myform">
<select name="mylist" size="3">
<option value="1">Miniature Thing</option>
<option value="3">Very Big Thing</option>
<option value="2">Average Thing</option>
<option value="">Other Thing</option>
<option value="1">Little Thing</option>
<option value="3">Huge Thing</option>
<option value="">Other Thing</option>
<option value="2">Medium Size Thing</option>
</select>
<br>
<input type="button" onclick="showtxt()" value="Get Package Size">
</form>
</div>

<div style="width:200px; border:1px solid black; padding: 10px" >
<table>
<tr>
<td><b>Size:</b></td><td id="SizeName"></td>
</table>
</div>

</body>
</html>

Fotiman

7:16 pm on Jun 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You switch statement is using a String value but all of your cases are integer values. Try either making the cases strings, or making your select case an integer.

lexipixel

7:31 pm on Jun 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks foti -- worked like a charm!

(I made cases strings)..