--- layout: default title: Multiple select title_tag: true permalink: /examples/multiple-select/ ---

Basic multiple select

{% assign field_name = "multiple-select" %} {% capture example_html %} {% endcapture %} {% capture example_js %} $( '#{{ field_name }}-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}

Multiple select w/ optgroup

{% assign field_name = "multiple-select-optgroup" %} {% capture example_html %} {% endcapture %} {% capture example_js %} $( '#{{ field_name }}-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}

Multiple select w/ allow clear

{% assign field_name = "multiple-select-clear" %} {% capture example_html %} {% endcapture %} {% capture example_js %} $( '#{{ field_name }}-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, allowClear: true, } ); {% endcapture %} {% include example.html %}

Multiple select w/ custom entries

{% assign field_name = "multiple-select-custom" %} {% capture example_html %} {% endcapture %} {% capture example_js %} $( '#{{ field_name }}-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, tags: true } ); {% endcapture %} {% include example.html %}

Disabled multiple select

{% assign field_name = "multiple-select-disabled" %} {% capture example_html %} {% endcapture %} {% capture example_js %} $( '#{{ field_name }}-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}