Modifying OPTGROUP Element Labels : Option Select ComboBox : Form Control JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Form Control » Option Select ComboBox »

 

Modifying OPTGROUP Element Labels



<HTML>
<HEAD>
<TITLE>Color Changer 3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var regularLabels = ["Reds","Greens","Blues"]
var naturalLabels = ["AA","VV","BB"]

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
    }
}
</SCRIPT>
</HEAD>
<BODY onUnload="document.forms[0].reset()">
<FORM>
<P>Choose a background color:
<SELECT name="colorsList" onChange="seeColor(this)">
    <OPTGROUP ID="optGrp1" label="group 1">
        <OPTION value="#ff9999">Light Red
        <OPTION value="green">green
        <OPTION value="red">Red
        <OPTION value="yellow">yellow
    </OPTGROUP>
    <OPTGROUP ID="optGrp2" label="group 2">
        <OPTION value="#ccff66">Light Green
        <OPTION value="yellow">yellow
        <OPTION value="green">green
        <OPTION value="red">red
    </OPTGROUP>

<OPTGROUP ID="optGrp3" label="Blues">
        <OPTION value="#ccffff">Light Blue
        <OPTION value="#66ccff">Medium Blue
        <OPTION value="#0000ff">Bright Blue
        <OPTION value="#000066">Dark Blue
    </OPTGROUP>
</SELECT></P>
<P>
<INPUT TYPE="radio" NAME="labels" CHECKED onClick="setRegularLabels(this.form.colorsList)">Regular Label Names
<INPUT TYPE="radio" NAME="labels" onClick="setNaturalLabels(this.form.colorsList)">Label Names from Nature</P>
</FORM>
</BODY>
</HTML>



           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Form Control
» Option Select ComboBox