Select2 with a checkbox list for a multiple select

Question

I need to implement a select similar to this http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

I want to use select2 for this, but I haven't been able to find anything from the creator of the select2 that would support this style of dropdown with checkboxes in it. Does anyone know a way to do this?

Answer 1

I've faced a similar need but was not able to find it.

The solution I've came across was using the flag closeOnSelect set to false

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

Answer 2

Seems this is old post, but as it is very common issue, I`m posting this here.

I found that the author already added a plugin to select2 for this feature to have checkbox-like selection and the dropdown does not hide on click:

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

Example:

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

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

All other features of select2 are preserved. There are few more predefined options set to work properly.

Answer 3

I managed to put something together, not perfect, but it works.

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

Answer 4

Add just two emoji with 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;
            }
        }
    }
}

You see this sample a RTL select2 with emoji based checkbox