Modifying OPTGROUP Element Labels : JavaScript DHTML examples (example source code) » Form Control » Option Select ComboBox

JavaScript DHTML
C++
Java Products
Java Articles
JavaScript DHTML Home  »   Form Control   » [  Option Select ComboBox  ]   
 



Modifying OPTGROUP Element Labels

Please note that some example is only working under IE or Firefox.

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/

<HTML>
<HEAD>
<TITLE>Color Changer 3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
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
    }
}
</SCRIPT>
</HEAD>
<BODY onUnload="document.forms[0].reset()">
<FORM>
<P>Choose a background color:
<SELECT name="colorsList" onChange="seeColor(this)">
    <OPTGROUP ID="optGrp1" label="Reds">
        <OPTION value="#ff9999">Light Red
        <OPTION value="#ff3366">Medium Red
        <OPTION value="#ff0000">Bright Red
        <OPTION value="#660000">Dark Red
    </OPTGROUP>
    <OPTGROUP ID="optGrp2" label="Greens">
        <OPTION value="#ccff66">Light Green
        <OPTION value="#99ff33">Medium Green
        <OPTION value="#00ff00">Bright Green
        <OPTION value="#006600">Dark Green
    </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>
Related examples in the same category
1.  Option selected index
2.  Auto Linked Option Listbox without button
3.  Change background
4.  Changing Select Element Content (two Combobox)
5.  Drop-down Redirect - No Submit button
6.  Drop-down Redirect - Submit
7.  Dropdown list (combobox) in a form
8.  dropdown list (combobox) in form 2
9.  Disable or enable an option
10.  Disable and enable a dropdown list (combobox)
11.  Return the name of the form that contains dropdown list (combobox)
12.  Number of options in the dropdown list(Combobox)
13.  Change the size of a dropdown list (ComboBox)
14.  Select multiple options in a dropdown list (option)
15.  Return the selected option as text in option
16.  Return the selected option as a number
17.  Change the option text
18.  Remove an option from a dropdown list (combobox)
19.  Methods and Properties of the Select Object
20.  Properties of the Option Object
21.   Using the Location object to change another frame's URL
22.  Using a Summary Form to Support Local Processing
23.  Navigating with a SELECT Object
24.  Using the selectedIndex Property
25.  Using the options[index].text Property
26.   Using the options[index].value Property
27.  Triggering a Color Change from a Pop-Up Menu
28.  Modifying SELECT Options
29.  Modifying SELECT Options (IE4+)
30.  Modifying SELECT Options (NN6+)
31.  Selecting an Option Using JavaScript
32.  Linked ComboBox (option) Country =- province
33.  ComboBox set value to TextField
34.  Menu(Option) Generator
35.  URL Option ComboBox
36.  Show Selected Option items








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.