JavaScript Examples Bible - UserWorks Technologies

Chapter 10 ✦ Select, Option, and Optgroup Objects (Chapter 26)
Example
I present Listing 26-9 in the hope that Microsoft and Netscape will eventually
eradicate the bugs that afflict their current implementations of the label property.
When the feature works as intended, Listing 26-9 demonstrates how a script can
alter the text of option group labels. This page is an enhanced version of the background
color setters used in other examples of this chapter. Be aware that IE5/Mac
does not alter the last OPTGROUP element’s label, and NN6 achieves only a partial
change to the text displayed in the SELECT element.
Listing 26-9: Modifying OPTGROUP Element Labels
Color Changer 3
var regularLabels = [“Reds”,”Greens”,”Blues”]
var naturalLabels = [“Apples”,”Leaves”,”Sea”]
function setRegularLabels(list) {
var optGrps = list.getElementsByTagName(“OPTGROUP”)
for (var i = 0; i < optGrps.length; i++) {
optGrps[i].label = regularLabels[i]
}
}
function setNaturalLabels(list) {
var optGrps = list.getElementsByTagName(“OPTGROUP”)
for (var i = 0; i < optGrps.length; i++) {
optGrps[i].label = naturalLabels[i]
}
}
function seeColor(list) {
var newColor = (list.options[list.selectedIndex].value)
if (newColor) {
document.bgColor = newColor
}
}
Choose a background color:
Light Red
Medium Red
Bright Red
Dark Red
Light Green
Continued
379
OPTGROUP.label