样式选择2多选与单选相同？答案

【问题标题】：Style select2 multi select same as single select?样式选择2多选与单选相同？
【发布时间】：2013-01-14 13:15:01
【问题描述】：

基本上我想要做的是让 input 仅充当显示，当单击字段时，我希望下拉搜索字段与单选相同。 p>

下面的（做得不好的）模型比我能更好地解释这一点。

Select2 是否内置了这个功能，或者有什么简单的方法可以做到这一点？

【问题讨论】：

很难准确地确定您在寻找什么。看看Chosen插件，它是你想要的吗？
Select2 是基于选择的，看看demo page 看看单选是如何工作的？现在看看多选，我喜欢多选的整个“标记”内容，但我不想输入“标记输入”我希望搜索字段出现在下面，就像它在单选中一样选择版本。
如果有人想摆弄，这里有一个加载了 Select2 的小提琴。 jsfiddle.net/isherwood/yJYpY 我认为您必须破解 S2 核心才能使其正常工作。

标签： jquery css jquery-select2

【解决方案1】：

对于那些仍在寻找解决方案的人，看看我的小提琴。

我已经使用了几个关于这个问题的小提琴并将它们组合成 1

不完美，但可以。

https://jsfiddle.net/Lkkm2L48/7/

jQuery(function($) {
    $.fn.select2.amd.require([
    'select2/selection/single',
    'select2/selection/placeholder',
    'select2/selection/allowClear',
    'select2/dropdown',
    'select2/dropdown/search',
    'select2/dropdown/attachBody',
    'select2/utils'
  ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {

        var SelectionAdapter = Utils.Decorate(
      SingleSelection,
      Placeholder
    );

    SelectionAdapter = Utils.Decorate(
      SelectionAdapter,
      AllowClear
    );

    var DropdownAdapter = Utils.Decorate(
      Utils.Decorate(
        Dropdown,
        DropdownSearch
      ),
      AttachBody
    );

        var base_element = $('.select2-multiple2')
    $(base_element).select2({
        placeholder: 'Select multiple items',
      selectionAdapter: SelectionAdapter,
      dropdownAdapter: DropdownAdapter,
      allowClear: true,
      templateResult: function (data) {

        if (!data.id) { return data.text; }

        var $res = $('<div></div>');

        $res.text(data.text);
        $res.addClass('wrap');

        return $res;
      },
      templateSelection: function (data) {
        if (!data.id) { return data.text; }
        var selected = ($(base_element).val() || []).length;
        var total = $('option', $(base_element)).length;
        return "Selected " + selected + " of " + total;
      }
    })

  });

});

CSS：

.select2-results__option .wrap:before{
    font-family:fontAwesome;
    color:#999;
    content:"\f096";
    width:25px;
    height:25px;
    padding-right: 10px;

}
.select2-results__option[aria-selected=true] .wrap:before{
    content:"\f14a";
}

【讨论】：