Tengo la siguiente etiqueta de select con dos optgroup .
<select id="linkSelector" class="form-control" onchange="linkDropDown();"> <optgroup label="Input"> <option value="default">Road type</option> <option value="lanes">Lanes</option> <option value="length">Length</option> <option value="speed">Speed</option> </optgroup> <optgroup label="Ouput"> <option value="congestion">Congestion</option> <option value="speed_output">Speed</option> <option value="travel_time">Travel Time</option> </optgroup> </select> Me gustaría ejecutar myFuncton() según el grupo de optgroup seleccionado. Por ejemplo, si uno de los valores desplegables pertenece a <optgroup label="Input"> , ejecute myFunction() .
Intenté esto:
var linkSelector = document.getElementById('linkSelector') opt = linkSelector.getElementsByTagName('optgroup') if (opt[0].label =='Input'){ myFunction() }Una forma de hacerlo sería obtener la opción seleccionada para el campo de selección y luego averiguar su etiqueta principal.
var label = document.getElementById('linkSelector').selectedOptions[0].parentElement.label; if (label === "Input") { myFunction(); }