如何使用Select2插件实现树形下拉视图？求技术实现指导

我懂你想要的那种层级分明的树形下拉效果，目前你用的基础Select2配置确实没法直接实现这个需求，不过我们可以通过optgroup分组配合自定义CSS样式来搞定，下面是具体的实现步骤和代码：

核心思路 #

Select2原生支持<optgroup>标签来做分组，我们可以用它来构建层级结构，再通过CSS给不同层级的选项添加缩进，模拟出树形的视觉效果。

修改后的完整代码 #

HTML 结构 #

首先要把你的选项按层级用<optgroup>嵌套起来，明确父级和子级的关系：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css' rel="stylesheet">

<select name="" id="" class="js-example-basic-single">
  <optgroup label="Pepal Inc.">
    <optgroup label="Business Unit 1">
      <optgroup label="Sub Business Unit 1">
        <option value="child-level1">Sub Sub Business Unit 1</option>
      </optgroup>
    </optgroup>
    <option value="child-level1">Business Unit 2</option>
    <optgroup label="Business Unit 3">
      <optgroup label="Sub Business Unit 3">
        <option value="child-level1">Sub Sub Business Unit 3</option>
      </optgroup>
    </optgroup>
  </optgroup>
</select>

CSS 样式 #

添加缩进样式，让不同层级的选项显示出树形结构：

select { width: 100%; }

/* 给分组添加基础缩进 */
.select2-results__group {
  padding-left: 10px;
  font-weight: bold;
}
/* 给选项添加缩进 */
.select2-results__option {
  padding-left: 20px;
}
/* 更深层级的分组和选项增加缩进 */
.select2-results__group .select2-results__group {
  padding-left: 20px;
}
.select2-results__group .select2-results__group .select2-results__option {
  padding-left: 30px;
}

JavaScript 配置 #

保留基础配置即可，如果想要更灵活的自定义显示，也可以使用templateResult来动态处理层级：

$('.js-example-basic-single').select2({
  placeholder: 'Select an option',
  // 可选：自定义模板优化显示
  templateResult: function(item) {
    let indent = 0;
    let parent = item.element.parentNode;
    // 计算当前项的层级
    while (parent.tagName === 'OPTGROUP') {
      indent += 10;
      parent = parent.parentNode;
    }
    return $('<span style="padding-left: ' + indent + 'px;">' + item.text + '</span>');
  }
});

这样配置后，下拉菜单就会呈现出你想要的层级树形效果，父级分组会加粗显示，子选项按层级缩进，完全符合你的预期。

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