Grouped selection control on change event : Select « Form « JavaScript Tutorial
- JavaScript Tutorial
- Form
- Select
<html>
<head>
<title>Color Changer 3</title>
<script type="text/javascript">
function seeColor(list) {
var newColor = (list.options[list.selectedIndex].value);
if (newColor) {
document.bgColor = newColor;
}
}
</script>
</head>
<body onload="seeColor(document.getElementById('colorsList'))">
<form>
<select name="colorsList"
id="colorsList" onchange="seeColor(this)">
<optgroup id="optGrp1" label="Reds">
<option value="#ff9999">Light Red</option>
<option value="#ff3366">Medium Red</option>
<option value="#ff0000">Bright Red</option>
<option value="#660000">Dark Red</option>
</optgroup>
<optgroup id="optGrp2" label="Greens">
<option value="#ccff66">Light Green</option>
<option value="#99ff33">Medium Green</option>
<option value="#00ff00">Bright Green</option>
<option value="#006600">Dark Green</option>
</optgroup>
<optgroup id="optGrp3" label="Blues">
<option value="#ccffff">Light Blue</option>
<option value="#66ccff">Medium Blue</option>
<option value="#0000ff">Bright Blue</option>
<option value="#000066">Dark Blue</option>
</optgroup>
</select></p>
</form>
</body>
</html>