Modifying optgroup Element Labels : select option « Form « JavaScript Tutorial
- JavaScript Tutorial
- Form
- select option
<html>
<head>
<title>Color</title>
<script type="text/javascript">
var naturalLabels = ["G1","G2","G3"];
function myFlag(list) {
var optGrps = list.getElementsByTagName("optgroup");
for (var i = 0; i < optGrps.length; i++) {
optGrps[i].label = naturalLabels[i];
}
}
</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="#660000">Dark Red</option>
</optgroup>
<optgroup id="optGrp2" label="Greens">
<option value="#ccff66">Light Green</option>
</optgroup>
<optgroup id="optGrp3" label="Blues">
<option value="#ccffff">Light Blue</option>
</optgroup>
</select>
<input type="radio" name="labels"
onclick="myFlag(this.form.colorsList)" />Set Label</p>
</form>
</body>
</html>