---
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 %}