On this page

Single select

Basic single select

    
<select class="form-select" id="single-select-field" data-placeholder="Choose one thing">
    <option></option>
    <option>Reactive</option>
    <option>Solution</option>
    <option>Conglomeration</option>
    <option>Algoritm</option>
    <option>Holistic</option>
</select>

    
$( '#single-select-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

Single select w/ optgroup

    
<select class="form-select" id="single-select-optgroup-field" data-placeholder="Choose one thing">
    <option></option>
    <optgroup label="Group 1">
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
    </optgroup>
    <optgroup label="Group 2">
        <option>Algoritm</option>
        <option>Holistic</option>
    </optgroup>
</select>

    
$( '#single-select-optgroup-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

Single select w/ allow clear

    
<select class="form-select" id="single-select-clear-field" data-placeholder="Choose one thing">
    <option></option>
    <option>Reactive</option>
    <option>Solution</option>
    <option>Conglomeration</option>
    <option>Algoritm</option>
    <option>Holistic</option>
</select>

    
$( '#single-select-clear-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    allowClear: true
} );

Disabled single select

    
<select class="form-select" id="single-select-disabled-field" data-placeholder="Choose one thing" disabled>
    <option></option>
    <option>Reactive</option>
    <option>Solution</option>
    <option>Conglomeration</option>
    <option>Algoritm</option>
    <option>Holistic</option>
</select>

    
$( '#single-select-disabled-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );