如何用jQuery将含optgroup的select转为对应结构的ul/li？

嘿，我完全懂你现在的困扰——之前把所有<option>都塞进每个<optgroup>对应的<ul>里，肯定乱糟糟的。咱们只需要调整遍历的范围，就能让每个分组只装自己的选项，完美实现需求！

问题根源 #

你之前应该是全局遍历了所有<option>，而没有限定只取当前<optgroup>下的子选项，才导致所有选项重复出现在每个分组里。

解决方案代码 #

下面是修正后的jQuery代码，专门处理两种场景（有无optgroup）：

// 替换成你的select选择器，比如#mySelect
const $originalSelect = $('#mySelect');
// 创建自定义下拉的容器
const $customDropdown = $('<div class="custom-dropdown-wrapper"></div>');

// 遍历原select的直接子元素（只找一级子节点，避免嵌套问题）
$originalSelect.children().each(function() {
  const $currentElement = $(this);

  // 处理独立的option（没有在optgroup里的）
  if ($currentElement.is('option')) {
    const $customOption = $('<li class="custom-option"></li>')
      .text($currentElement.text())
      .attr('data-value', $currentElement.val()); // 保留原option的值
    $customDropdown.append($customOption);
  }

  // 处理optgroup分组
  else if ($currentElement.is('optgroup')) {
    // 创建分组对应的ul容器
    const $groupContainer = $('<ul class="optgroup-container"></ul>');
    // 可以把optgroup的label作为分组标题（可选，提升体验）
    const $groupTitle = $('<li class="optgroup-title"></li>')
      .text($currentElement.attr('label'));
    $groupContainer.append($groupTitle);

    // 关键！只遍历当前optgroup下的option，不是全局所有option
    $currentElement.children('option').each(function() {
      const $groupOption = $(this);
      const $customGroupOption = $('<li class="custom-option"></li>')
        .text($groupOption.text())
        .attr('data-value', $groupOption.val());
      $groupContainer.append($customGroupOption);
    });

    // 把整个分组容器加到自定义下拉里
    $customDropdown.append($groupContainer);
  }
});

// 把自定义下拉插入到原select后面，然后隐藏原select
$originalSelect.after($customDropdown);
$originalSelect.hide();

核心改进点 #

• 遍历原select的直接子元素：用.children()而不是.find()，避免拿到嵌套的元素
• 处理optgroup时，只遍历当前optgroup下的子option：$currentElement.children('option')，这就保证了每个分组只包含自己的选项
• 保留原option的value值：用data-value属性存起来，后续做选择逻辑的时候能用到

测试两种场景 #

1. 无optgroup的原结构：

   <select>
     <option value="1">选项1</option>
     <option value="2">选项2</option>
   </select>
   

   转换后会生成：

   <div class="custom-dropdown-wrapper">
     <li class="custom-option" data-value="1">选项1</li>
     <li class="custom-option" data-value="2">选项2</li>
   </div>
   

2. 有optgroup的原结构：

   <select>
     <optgroup label="分组A">
       <option value="a1">A选项1</option>
       <option value="a2">A选项2</option>
     </optgroup>
     <optgroup label="分组B">
       <option value="b1">B选项1</option>
     </optgroup>
   </select>
   

   转换后会生成：

   <div class="custom-dropdown-wrapper">
     <ul class="optgroup-container">
       <li class="optgroup-title">分组A</li>
       <li class="custom-option" data-value="a1">A选项1</li>
       <li class="custom-option" data-value="a2">A选项2</li>
     </ul>
     <ul class="optgroup-container">
       <li class="optgroup-title">分组B</li>
       <li class="custom-option" data-value="b1">B选项1</li>
     </ul>
   </div>
   

这样就完全符合你的需求啦，每个分组都只包含自己的选项，不会出现重复的情况～

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