JSFiddle - React, Tailwind, and code Playground

by Raphaël

HTML

<select name="t" id="t">
    <option value="all">- all -</option>
    <optgroup label="Europe">
        <option selected value="1" myAttr="1">Fr</option>
        <option value="2" myAttr="0">Uk</option>
    </optgroup>
    <optgroup label="America">
        <option value="3" myAttr="1">USA</option>
        <option value="4" myAttr="0">CA</option>
    </optgroup>
    <optgroup label="Asia">
        <option value="5" myAttr="0">JP</option>
    </optgroup>
</select>

JavaScript

var temp = document.getElementById("t").childNodes;
// Loop the optGroup
for (var i = 0; i < temp.length; i++) {
    // Loop the option
    for (var j = 0; j < temp[i].childNodes.length; j++) {
        window.console.log(temp[i].childNodes[j])
        window.console.log(temp[i].childNodes[j].constructor.name);
    }
}