Select2 如何实现多选

发表于 2016-05-06 更新于 2024-04-26 分类于 FrontEnd 阅读次数：本文字数： 795 阅读时长 ≈ 1 分钟

Selete2 默认不支持多选。

先看成果：

演示图

思路

监控两个事件( select, unselect)，覆写显示结果 ( templateResult )。

选中某个元素，就会创建一个同样内容的 option。

1
2
3

$eventSelect.on("select2:select", function (e) { 
  $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});

在 templateResult 显示具体的元素时，检查 obj.element.selected, 如果为 true, 就直接不显示。

function formatResultData (data) {
  if (!data.id) return data.text;
  if (data.element.selected) return
  return data.text;
};

$eventSelect.select2({
  templateResult: formatResultData,
  tags: true}
);

取消选中某个元素时，就直接删除该 option。

1
2
3

$eventSelect.on("select2:unselect", function (e) { 
  e.params.data.element.remove();
});

最终的代码

jsfiddle 代码

相关链接

官方 event 事件文档
 how to allow duplicate selections · Issue #3341 · select2/select2

0%