如何获取父级 Option Group 的文本标签

在前端页面的下拉选择框中，我们经常会使用optgroup标签对选项进行分组，每个分组都有自己的文本标签用于说明分组含义。当页面中某个下拉选项被选中时，我们可能需要获取该选项所属的父级optgroup的文本标签，用于后续的业务逻辑处理。

实现思路

要获取父级Option Group的文本标签，核心逻辑是通过选中的option元素向上查找父节点，找到对应的optgroup元素后，读取其label属性值即可。具体步骤如下：

• 首先获取当前被选中的option元素
• 判断该option元素的父节点是否为optgroup元素
• 如果是，直接读取父节点的label属性值
• 如果不是，说明该选项没有父级分组，返回空值或者对应提示

基础实现代码

以下是一个简单的HTML结构和对应的JavaScript实现代码：

<select id="groupSelect">
  <optgroup label="水果分组">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="蔬菜分组">
    <option value="tomato">番茄</option>
    <option value="potato">土豆</option>
  </optgroup>
</select>
<div id="result"></div>

对应的JavaScript逻辑代码如下：

// 获取下拉框元素
const selectEl = document.getElementById('groupSelect');
// 获取展示结果的容器
const resultEl = document.getElementById('result');

// 给下拉框绑定change事件
selectEl.addEventListener('change', function() {
  // 获取当前选中的option元素
  const selectedOption = this.options[this.selectedIndex];
  // 获取选中的option的父节点
  const parentNode = selectedOption.parentNode;
  let groupLabel = '';
  // 判断父节点是否为optgroup元素
  if (parentNode.tagName.toLowerCase() === 'optgroup') {
    // 读取optgroup的label属性值
    groupLabel = parentNode.label;
  }
  // 展示结果
  if (groupLabel) {
    resultEl.textContent = `当前选项所属的分组是：${groupLabel}`;
  } else {
    resultEl.textContent = '当前选项没有所属的分组';
  }
});

特殊场景适配

动态生成的选项场景

如果下拉框的选项和分组是动态生成的，上述逻辑依然适用，只需要在生成完成后绑定事件即可，示例代码如下：

// 动态生成下拉框内容
const selectEl = document.getElementById('groupSelect');
const groupData = [
  {
    label: '数码产品',
    options: [
      { value: 'phone', text: '手机' },
      { value: 'computer', text: '电脑' }
    ]
  },
  {
    label: '家居用品',
    options: [
      { value: 'sofa', text: '沙发' },
      { value: 'table', text: '桌子' }
    ]
  }
];

groupData.forEach(group => {
  const optgroup = document.createElement('optgroup');
  optgroup.label = group.label;
  group.options.forEach(item => {
    const option = document.createElement('option');
    option.value = item.value;
    option.textContent = item.text;
    optgroup.appendChild(option);
  });
  selectEl.appendChild(optgroup);
});

// 绑定change事件逻辑和之前一致
selectEl.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  const parentNode = selectedOption.parentNode;
  let groupLabel = '';
  if (parentNode.tagName.toLowerCase() === 'optgroup') {
    groupLabel = parentNode.label;
  }
  console.log('父级分组标签：', groupLabel);
});

兼容旧版本浏览器

如果需要兼容不支持label属性直接读取的旧版本浏览器，可以使用getAttribute方法获取属性值，代码如下：

// 替换之前的label读取逻辑
if (parentNode.tagName.toLowerCase() === 'optgroup') {
  groupLabel = parentNode.getAttribute('label');
}

注意事项

• 确保optgroup标签正确设置了label属性，否则无法获取到对应的文本标签
• 如果下拉框中存在没有分组的option元素，需要做空值判断避免报错
• 如果页面中有多个下拉框需要获取父级分组标签，可以将逻辑封装成通用函数，减少重复代码

封装后的通用函数示例如下：

/**
 * 获取选中选项所属的optgroup的label值
 * @param {HTMLSelectElement} selectEl - 下拉框元素
 * @returns {string} 分组标签文本，没有则返回空字符串
 */
function getParentGroupLabel(selectEl) {
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  if (!selectedOption) return '';
  const parentNode = selectedOption.parentNode;
  if (parentNode.tagName.toLowerCase() === 'optgroup') {
    return parentNode.label || parentNode.getAttribute('label') || '';
  }
  return '';
}

Option_GroupselectJavaScriptDOM修改时间：2026-07-11 11:54:12