Angular项目ng-multiselect-dropdown实现连续范围选项自动选中

实现步骤 #

1. 修改模板绑定选中/取消选中事件 #

给ng-multiselect-dropdown新增onSelect和onDeSelect事件监听，用于触发自动选中逻辑，修改后代码如下：

<!-- Select quarter -->
<div class="dropdown ml-2">
  <ng-multiselect-dropdown
    [placeholder]="'Select quarter(s)'"
    [settings]="dropdownSettings"
    [data]="quarterList"
    [(ngModel)]="selectedQuarterList"
    (onDropDownClose)="onDropdownClose()"
    (click)="this.isDropdownOpen = true"
    <!-- 新增事件 -->
    (onSelect)="onQuarterChange()"
    (onDeSelect)="onQuarterChange()"
  >
  </ng-multiselect-dropdown>
</div>

如果你不需要取消选中时触发自动补全逻辑，可以只给onSelect绑定事件

2. 新增TS逻辑实现连续季度自动选中 #

前提要求：你的quarterList数组按季度顺序排列，quarterId按Q1=1、Q2=2、Q3=3、Q4=4的规则赋值。
在component.ts中添加如下代码：

// 已有变量声明
quarterList = [
  { quarterId: 1, title: 'Q1' },
  { quarterId: 2, title: 'Q2' },
  { quarterId: 3, title: 'Q3' },
  { quarterId: 4, title: 'Q4' },
];
selectedQuarterList = [];
dropdownSettings: any;

ngOnInit() {
  this.dropdownSettings = {
    singleSelection: false,
    idField: "quarterId",
    textField: "title",
    selectAllText: "Select All",
    unSelectAllText: "Clear selection",
    itemsShowLimit: 4,
    allowSearchFilter: false,
  };
}

// 新增季度变化处理方法
onQuarterChange() {
  // 选中项少于2个直接跳过逻辑
  if (this.selectedQuarterList.length < 2) return;

  // 提取所有选中的季度ID并排序
  const selectedIds = this.selectedQuarterList.map(item => item.quarterId).sort((a, b) => a - b);
  const minId = selectedIds[0];
  const maxId = selectedIds[selectedIds.length - 1];

  // 筛选出ID在最小和最大之间的所有季度，作为新的选中列表
  this.selectedQuarterList = this.quarterList.filter(quarter => {
    return quarter.quarterId >= minId && quarter.quarterId <= maxId;
  });
}

逻辑说明 #

• 每次用户选中/取消选中季度时，都会触发onQuarterChange方法
• 当选中项不足2个时不做处理，符合需求
• 当选中2个及以上季度时，自动取选中项的最小、最大季度ID，把中间所有连续季度都加入选中列表，实现范围自动选中效果
• 比如选中Q2和Q4时，minId=2、maxId=4，会自动把ID为3的Q3加入选中列表

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