--- layout: default title: Single select title_tag: true permalink: /examples/single-select/4.0/ ---

Basic single select

{% assign field_name = "single-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' ), } ); {% endcapture %} {% include example.html %}

Single select w/ optgroup

{% assign field_name = "single-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' ), } ); {% endcapture %} {% include example.html %}

Single select w/ allow clear

{% assign field_name = "single-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' ), allowClear: true } ); {% endcapture %} {% include example.html %}

Disabled single select

{% assign field_name = "single-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' ), } ); {% endcapture %} {% include example.html %}