First problem: the Selectize plugin removes all
<optgroup>
elements from the DOM. Your selected
<option>
is the only child element of the
<select>
.
You can use the Selectize API to get a reference to the element it uses to represent the selected option, and from there get the element it uses to represent the group:
$(function() {
const test = document.getElementById("test");
const $test = $(test);
$test.selectize();
const api = test.selectize;
$test.change(function(){
const selected = api.getOption(test.value);
const optgroup = selected.closest("div.optgroup");
alert(optgroup.attr("data-group"));
});
});
But that brings you on to the second problem: an
<optgroup>
doesn't have a
value
attribute. Selectize only copies the
label
attribute to the
data-group
attribute on its grouping element; all other attributes will be discarded.
You can't even get around the problem by adding
data-
attributes to the
option
elements, since the Selectize plugin discards those as well.
You'll need to ask the author(s) whether what you're trying to do is possible with their plugin:
Issues · selectize/selectize.js · GitHub[
^]