如何用JavaScript或jQuery实现optgroup默认折叠（不使用第三方库）

原生HTML的<optgroup>本身不支持折叠/展开功能，所以我们需要用JavaScript或jQuery手动模拟一个具备该功能的下拉组件，同时保留原生select的表单提交能力。以下是完整实现方案：

实现代码 #

HTML结构 #

保留原生select用于表单数据提交，同时添加模拟的下拉容器：

<!-- 原生select，隐藏后用于表单提交 -->
<select id="realSelect" style="display: none;">
  <optgroup label="Lagos">
    <option> Yaba </option>
    <option> Ikeja </option>
  </optgroup>
  <optgroup label="Abuja">
    <option> Wuse </option>
    <option> Area 1 </option>
  </optgroup>
</select>

<!-- 模拟的下拉交互组件 -->
<div class="custom-select">
  <div class="select-header">请选择</div>
  <div class="select-options">
    <!-- 内容将通过JS从原生select生成 -->
  </div>
</div>

CSS样式 #

给模拟组件添加基础样式，还原下拉框视觉效果：

.custom-select {
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.select-header {
  padding: 8px 12px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.select-options {
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.optgroup-label {
  padding: 6px 12px;
  background-color: #e9e9e9;
  font-weight: bold;
}

.optgroup-option {
  padding: 6px 24px;
  background-color: #fff;
}

.optgroup-option:hover {
  background-color: #f0f0f0;
}

.optgroup-options {
  display: none; /* 默认折叠optgroup选项 */
}

JavaScript实现（jQuery版本） #

处理下拉展开、optgroup折叠切换，以及选中值同步到原生select：

$(document).ready(function() {
  const $realSelect = $('#realSelect');
  const $selectOptions = $('.select-options');

  // 从原生select生成模拟组件的内容
  $realSelect.find('optgroup').each(function() {
    const groupLabel = $(this).attr('label');
    const $groupLabel = $('<div class="optgroup-label">' + groupLabel + '</div>');
    const $groupOptions = $('<div class="optgroup-options"></div>');
    
    $(this).find('option').each(function() {
      const optionText = $(this).text().trim();
      const $option = $('<div class="optgroup-option" data-value="' + $(this).val() + '">' + optionText + '</div>');
      $groupOptions.append($option);
    });

    $selectOptions.append($groupLabel).append($groupOptions);
  });

  // 点击下拉头部，展开/收起所有选项
  $('.select-header').click(function() {
    $('.select-options').toggle();
  });

  // 点击optgroup标题，展开/收起当前组选项
  $('.optgroup-label').click(function() {
    $(this).next('.optgroup-options').toggle();
  });

  // 点击选项，同步选中值到原生select并关闭下拉
  $('.optgroup-option').click(function() {
    const selectedValue = $(this).data('value');
    const selectedText = $(this).text();
    $realSelect.val(selectedValue);
    $('.select-header').text(selectedText);
    $('.select-options').hide();
  });

  // 点击页面其他区域，关闭下拉
  $(document).click(function(e) {
    if (!$(e.target).closest('.custom-select').length) {
      $('.select-options').hide();
    }
  });
});

说明 #

• 原生select仅用于表单提交时传递数据，保证表单功能正常
• 模拟组件默认折叠所有optgroup选项，点击组标题可切换展开/折叠状态
• 选中选项后会同步更新原生select的选中值，同时更新下拉头部显示文本
• 点击页面其他区域会自动关闭下拉框

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