Select2 с списком флажков для множественного выбора

Ответ 1

Я столкнулся с подобной потребностью, но не смог ее найти.

Решение, с которым я столкнулся, это использовать флаг closeOnSelect, установленный в false

$("#yadayada").select2({closeOnSelect:false}); http://jsfiddle.net/jEADR/521/

Ответ 2

Кажется, это старый пост, но, поскольку это очень распространенная проблема, я публикую это здесь.

Я обнаружил, что автор уже добавил плагин для выбора2, чтобы эта функция имела флажок, и выбор не скрывается при нажатии:

https://github.com/wasikuss/select2-multi-checkboxes

Пример:

$('.select2-multiple').select2MultiCheckboxes({
    placeholder: "Choose multiple elements",
})

http://jsfiddle.net/wasikuss/gx93rwnk/

Все остальные функции select2 сохраняются. Предусмотрено несколько предопределенных параметров.

Ответ 3

Мне удалось собрать что-то вместе, не совершенное, но оно работает.

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";
}

Ответ 4

Добавьте только два emoji с css

.select2-results__options {
    &[aria-multiselectable=true] {

        .select2-results__option {
            &[aria-selected=true]:before {
                content: '☑';
                padding: 0 0 0 4px;
            }

            &:before {
                content: '◻';
                padding: 0 0 0 4px;
            }
        }
    }
}

Вы видите этот образец RTL select2 с флажком на основе emoji

Ответ 5

Другим обходным решением является "добавить" значки с помощью CSS. Я использую тему начальной загрузки - ваш select2-container может быть другим.

.select2-container--bootstrap .select2-results__option[aria-selected=true]:before { content:'\e067 '; padding:0 8px 0 0px; font-family:'Glyphicons Halflings' }
.select2-container--bootstrap .select2-results__option:before { content:'\e157 '; padding:0 8px 0 0px; font-family:'Glyphicons Halflings' }

Ответ 6

Вот очень простой фрагмент, без странного изменения js - чистый и простой CSS (с "Font Awesome")

$('.select2[multiple]').select2({
    width: '100%',
    closeOnSelect: false
})

#body{
padding: 30px
}

.select2-results__options[aria-multiselectable="true"] li {
    padding-left: 30px;
    position: relative
}

.select2-results__options[aria-multiselectable="true"] li:before {
    position: absolute;
    left: 8px;
    opacity: .6;
    top: 6px;
    font-family: "FontAwesome";
    content: "\f0c8";
}

.select2-results__options[aria-multiselectable="true"] li[aria-selected="true"]:before {
    content: "\f14a";
}

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css'; return false;" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>


<div id="body">
<select name="fabric_color_en[]" id="fabric_color_en[]" multiple="multiple" class="form-control select2">
    <option value="Beige">
        Beige
    </option>

    <option value="Red">
        Red
    </option>

    <option value="Petrol">
        Petrol
    </option>

    <option value="Royal Blue">
        Royal Blue
    </option>

    <option value="Dark Blue">
        Dark Blue
    </option>

    <option value="Bottle Green">
        Bottle Green
    </option>

    <option value="Light Grey">
        Light Grey
    </option>
</select>
</div>