Retrieving optgroup label for selected option in a drop down list with Mootools

Just a quick tip for getting the selected option optgroup label using Mootools:

The HTML:

<select id="transport">
    <optgroup label="Cars">
        <option>Ford</option>
        <option>BMW</option>
        <option>Mercedes</option>
    </optgroup>
    <optgroup label="Motorbikes">
        <option>Honda</option>
        <option>Yamaha</option>
        <option>BMW</option>
    </optgroup>
</select>

Mootools JavaScript:

// get optgroup label of selected option on change
document.id("transport").addEvent("change",function(){
    var optGroup=this.getSelected().getParent("optgroup").get("label");
    // do something with the label
    alert(optGroup);
})

Post to Twitter

chris@cbolson.com

No comments yet.

Write a comment: