如何显示opt-group下的所有选中选项？附示例代码

我来帮你搞定这个需求！要显示每个opt-group标签下的所有选中选项，用原生JavaScript就能轻松实现，下面是具体的步骤和代码示例：

第一步：补全HTML结构 #

首先得给select加上multiple属性才能支持多选，同时补全你没写完的代码：

<select name="select_projects" id="select_projects" multiple>
  <option value="">project.xml</option>
  <optgroup label="client1">
    <option value="">project2.xml</option>
  </optgroup>
  <optgroup label="client2">
    <option value="">project5.xml</option>
    <option value="">project6.xml</option>
    <optgroup label="client2_a">
      <option value="">project7.xml</option>
    </optgroup>
  </optgroup>
</select>
<!-- 加个按钮触发查看操作 -->
<button onclick="showSelectedOptions()">查看各分组选中项</button>
<!-- 用来展示结果的容器 -->
<div id="result"></div>

第二步：编写JavaScript逻辑 #

写一个函数来遍历分组、筛选选中项并展示结果：

function showSelectedOptions() {
  // 获取select元素和结果容器
  const selectEl = document.getElementById('select_projects');
  const resultEl = document.getElementById('result');
  let displayContent = '';

  // 遍历所有optgroup分组
  const allOptGroups = selectEl.querySelectorAll('optgroup');
  allOptGroups.forEach(group => {
    const groupName = group.getAttribute('label');
    // 筛选当前分组下被选中的选项
    const selectedItems = group.querySelectorAll('option:checked');
    
    // 如果当前分组有选中项，就拼接展示内容
    if (selectedItems.length > 0) {
      displayContent += `<h4>${groupName}</h4>`;
      displayContent += '<ul>';
      selectedItems.forEach(item => {
        displayContent += `<li>${item.textContent}</li>`;
      });
      displayContent += '</ul>';
    }
  });

  // 处理不在任何分组里的顶级选中项
  const topLevelSelected = selectEl.querySelectorAll('option:not(optgroup > option):checked');
  if (topLevelSelected.length > 0) {
    displayContent += '<h4>未分组项目</h4>';
    displayContent += '<ul>';
    topLevelSelected.forEach(item => {
      displayContent += `<li>${item.textContent}</li>`;
    });
    displayContent += '</ul>';
  }

  // 把结果渲染到页面，没有选中项时显示提示
  resultEl.innerHTML = displayContent || '<p>目前没有选中任何项目</p>';
}

代码说明 #

• 用querySelectorAll('optgroup')获取所有分组，再逐个遍历
• 用:checked选择器精准筛选每个分组内的选中选项
• 额外处理了不在optgroup里的顶级选项，避免遗漏
• 最后把结果以清晰的列表形式展示在页面上，体验更友好

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