Page is a not externally linkable
nyteshade - 6:33 pm on Mar 9, 2012 (gmt 0)
I'm standing on the shoulders of giants here (fotiman), but I thought I'd take this to the next level for practice and hopefully to help out like so many have helped me.
I removed the table element to conform to accepted standards...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id='info'>
<fieldset><legend>Person 1 Information</legend>
<select id="choice1">
<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><span id="display1"> Select an option</span>
</fieldset>
<fieldset><legend>Person 2 Information</legend>
<select id="choice2">
<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><span id="display2"> Select an option</span>
</fieldset>
<fieldset>
<input type='reset' value='reset' id='reset' />
</fieldset>
</form>
<script type='text/javascript' src='scripts/external.js'></script>
</body>
</html>
...and took it just a bit further by employing unobtrusive JavaScript.
external.js file
function select_options(){
var textBlocks = [
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description'
];
document.getElementById('choice1').onchange=function(){
var ind = document.getElementById('choice1').selectedIndex;
document.getElementById('display1').innerHTML = ' '+textBlocks[ind];
}
document.getElementById('choice2').onchange=function(){
var ind = document.getElementById('choice2').selectedIndex;
document.getElementById('display2').innerHTML = ' '+textBlocks[ind];
}
}
function func_reset() {
document.getElementById('reset').onclick=function(){
document.getElementById('display1').innerHTML=" Select an option";
document.getElementById('display2').innerHTML=" Select an option";
}
}
window.onload=function(){
select_options();
func_reset();
}
Hmmm, now if I can just learn how to indent code!