首页 > 文章 > 前端

获取父级选项组标签文本

时间：2025-09-03 23:45:40 209浏览收藏

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

获取父级 Option Group 的文本标签

本文介绍了如何使用 JavaScript 获取 HTML

然后，可以使用 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结构发生变化，代码将失效。

总结

获取父级标签的文本标签需要理解 closest() 方法的工作原理，并注意嵌套标签可能带来的问题。建议使用扁平化结构和数据属性，或使用 JavaScript 动态构建选项，以实现更灵活和可维护的分组效果。如果必须使用嵌套结构，请谨慎使用 DOM 遍历，并确保代码的健壮性。

今天关于《获取父级选项组标签文本》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！