如何获取选中Option所属最外层Optgroup的Label文本？

我的HTML代码如下：

<select id="categoryg">
<optgroup label="Main" value="binding">
<optgroup label="Sub" value="binding">
                        <option value="46">Test</option>
                        <option value="47">Test2</option>
                        <option value="48">Test3</option>
</optgroup>
</select>

我希望切换选中项时，获取label为"Main"的父级Optgroup文本，但目前代码只能拿到子级Optgroup（label为"Sub"）的文本。

当前JS代码：

$('select').change(function () {

   var opt = $(this).find(':selected');
   var sel = opt.text();
   var og = opt.closest('optgroup').attr('label');
   
   console.log(og) // 输出Sub，期望得到Main;

});

解决方案 #

问题出在closest('optgroup')只会匹配最近的父级optgroup，也就是直接包裹option的"Sub"组。要拿到最外层的"Main"组，需要继续向上遍历DOM结构：

方法1：逐层向上查找 #

先找到直接父级的optgroup，再查找它的父级optgroup：

$('select').change(function () {
   var opt = $(this).find(':selected');
   var mainOg = opt.closest('optgroup').parent().closest('optgroup').attr('label');
   console.log(mainOg); // 输出Main
});

方法2：获取所有祖先optgroup并取最外层 #

如果嵌套层数不确定，用parents('optgroup')获取所有祖先optgroup，再取最后一个（最外层的）：

$('select').change(function () {
   var opt = $(this).find(':selected');
   var mainOg = opt.parents('optgroup').last().attr('label');
   console.log(mainOg); // 输出Main
});

内容的提问来源于stack exchange，提问作者Zerers