当前位置：首页 > 文章列表 > 文章 > 前端 > 获取父级选项组标签文本

获取父级选项组标签文本

2025-09-03 23:45:40 0浏览收藏

你在学习文章相关的知识吗？本文《获取父级选项组文本标签》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

获取父级 Option Group 的文本标签

本文介绍了如何使用 JavaScript 获取 HTML <select> 元素中选定标签的文本标签。重点在于理解 closest() 方法的行为，以及嵌套标签可能带来的问题，并提供替代方案以实现所需功能。

理解 closest() 方法

在 JavaScript 中，closest() 方法用于查找与指定选择器匹配的第一个祖先元素。在上述问题中，代码使用了 opt.closest('optgroup').attr('label') 来获取父级的 label 属性。然而，由于标签下，因此 closest('optgroup') 找到的是 "Sub" 而不是 "Main"。

嵌套的问题

嵌套标签在 HTML 中并不总是被正确支持，并且可能导致浏览器渲染问题。因此，建议避免使用嵌套标签。

替代方案

如果需要实现类似分组的效果，可以考虑以下替代方案：

扁平化结构 + 数据属性： 将标签移除，并使用数据属性来标识每个

&lt;select id=&quot;categoryg&quot;&gt;
    <option value="46" data-group="Main">Test</option>
    <option value="47" data-group="Main">Test2</option>
    <option value="48" data-group="Main">Test3</option>
&lt;/select&gt;

然后，可以使用 JavaScript 获取选定

$('select').change(function () {
    var opt = $(this).find(':selected');
    var group = opt.data('group');

    console.log(group); // Main
});

使用 JavaScript 手动构建选项： 完全移除标签，并使用 JavaScript 根据数据动态生成

const data = [
  { group: 'Main', value: '46', text: 'Test' },
  { group: 'Main', value: '47', text: 'Test2' },
  { group: 'Main', value: '48', text: 'Test3' },
];

const select = document.getElementById('categoryg');

data.forEach(item => {
  const option = document.createElement('option');
  option.value = item.value;
  option.textContent = item.text;
  option.dataset.group = item.group;
  select.appendChild(option);
});

$('select').change(function () {
    var opt = $(this).find(':selected');
    var group = opt.data('group');

    console.log(group); // Main
});

遍历 DOM 树： 如果确实需要获取 "Main" 的标签，并且确定 HTML 结构不变，可以使用 parents() 或 parent() 方法向上遍历 DOM 树，直到找到目标标签。但是这种方法依赖于特定的 HTML 结构，可维护性较差。
```
$('select').change(function () {
    var opt = $(this).find(':selected');
    var og = opt.closest('optgroup').parent().closest('optgroup').attr('label');

    console.log(og); // Main
});
```
注意： 这种方法依赖于固定的 HTML结构，如果HTML结构发生变化，代码将失效。