Select2 如何实现多选

发表于 更新于 分类于 阅读次数： 本文字数： 795 阅读时长 ≈ 1 分钟

Selete2 默认不支持多选。

先看成果：

演示图

思路

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

  1. 选中某个元素，就会创建一个同样内容的 option。
    1
    2
    3
    $eventSelect.on("select2:select", function (e) { 
      $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
    });
  2. 在 templateResult 显示具体的元素时，检查 obj.element.selected, 如果为 true, 就直接不显示。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function formatResultData (data) {
      if (!data.id) return data.text;
      if (data.element.selected) return
      return data.text;
    };

    $eventSelect.select2({
      templateResult: formatResultData,
      tags: true}
    );
  3. 取消选中某个元素时，就直接删除该 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