Angular中使用<select>标签实现带可选择子项的下拉列表

嘿，我之前也碰到过一模一样的需求，完全可以用原生<select>标签实现，不用改动你现有应用的其他代码，这里给你两种实用的实现方式：

方案1：文本缩进/符号标注模拟层级（最简单） #

原生<select>里的<optgroup>是用来分组的，本身没法被选中，所以要让所有选项都能选，我们可以把所有层级的选项都做成<option>，通过文本缩进或者层级符号来区分父子关系，完全不影响原有代码逻辑。

示例代码 #

// 组件.ts文件中定义下拉选项数据
export class YourComponent {
  dropdownOptions = [
    { label: '父项1', value: 'parent1', level: 0 },
    { label: '子项1-1', value: 'child1-1', level: 1 },
    { label: '子项1-2', value: 'child1-2', level: 1 },
    { label: '父项2', value: 'parent2', level: 0 },
    { label: '子项2-1', value: 'child2-1', level: 1 },
    { label: '孙项2-1-1', value: 'grandchild2-1-1', level: 2 },
  ];

  // 生成带层级标识的标签文本
  getHierarchyLabel(option: any): string {
    switch(option.level) {
      case 0:
        return option.label;
      case 1:
        return `├─ ${option.label}`;
      case 2:
        return `│  └─ ${option.label}`;
      default:
        return option.label;
    }
  }
}

<!-- 组件.html文件 -->
<select [(ngModel)]="selectedValue">
  <option *ngFor="let opt of dropdownOptions" [value]="opt.value">
    {{ getHierarchyLabel(opt) }}
  </option>
</select>

如果偏好缩进效果，可以把getHierarchyLabel改成用非换行空格实现：

getHierarchyLabel(option: any): string {
  const indent = ' '.repeat(option.level * 2);
  return `${indent}${option.label}`;
}

此时需要把<option>的文本绑定改成[innerHTML]="getHierarchyLabel(opt)"，避免浏览器合并空格。

方案2：自定义样式增强视觉层级（进阶） #

如果想让层级的视觉区分更明显，可以给不同层级的<option>添加自定义类，通过CSS控制缩进和颜色（注意：原生<option>的样式支持度在不同浏览器有差异，但基础样式是可行的）。

示例代码 #

// 组件.ts
export class YourComponent {
  dropdownOptions = [
    { label: '父项1', value: 'parent1', level: 0 },
    { label: '子项1-1', value: 'child1-1', level: 1 },
    // ...其他选项
  ];
}

<!-- 组件.html -->
<select [(ngModel)]="selectedValue">
  <option *ngFor="let opt of dropdownOptions" 
          [value]="opt.value" 
          [class.level-0]="opt.level === 0"
          [class.level-1]="opt.level === 1"
          [class.level-2]="opt.level === 2">
    {{ opt.label }}
  </option>
</select>

/* 组件样式文件 */
select option.level-1 {
  padding-left: 20px;
  color: #666;
}
select option.level-2 {
  padding-left: 40px;
  color: #999;
}

关键提醒 #

• 别用<optgroup>当可选项！它的作用只是分组，本身无法被选中，完全不符合你“所有选项均可选择”的需求。
• 如果不需要动态展开/折叠子项，上面两种方案完全够用，而且不会破坏你现有代码的结构。

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