Page is a not externally linkable
wren237 - 11:59 am on Mar 9, 2012 (gmt 0)
Hello! I'm relatively new to javascript, and could use a little help. I want text to change based on the option selected in a drop-down list. The problem is, the exact same drop-down list will appear multiple times on the page, and this script only works for the first one.
Any suggestions how to handle this?
Thanks!
Cheers,
Wren
<html>
<head><script type="text/javascript">
var textBlocks = new Array(
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description');
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
</script></head>
<body>
<form>
<table>
<tr>
<td>Person 1</td>
<td>Information</td>
<td><select id="choice" onchange="changeText('choice')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select></td>
<td><div id="display">Select an option</div></td></tr>
<tr>
<td>Person 2</td>
<td>Information</td>
<td><select id="choice" onchange="changeText('choice')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select></td>
<td><div id="display">Select an option</div></td></tr>
</table></form></body>
</html>