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

获取父级选项组标签文本

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

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

获取父级 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结构发生变化，代码将失效。