Javascript Form How to - Handle change event from Grouped selection control

Question

We would like to know how to handle change event from Grouped selection control.

Answer


  <!--from   w w w  .  j ava2  s . c  o m-->
<html> 
<head> 
<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>

</form> 
</body> 
</html>

The code above is rendered as follows: