select2 example

Example 1: kartik select2

$form->field($model, 'attribute')->widget(\kartik\select2\Select2::classname(), [
                'data' => \yii\helpers\ArrayHelper::map(Model::find()->all(), 'id', 'username'),
                'options' => ['placeholder' => 'Tanlang', 'multiple' => false, 'required' => true],
                'theme' => \kartik\select2\Select2::THEME_KRAJEE,
                'size' => 'xs',

Example 2: select2

$('.js-example-basic-single').select2({
  placeholder: 'Select an option'
});

Example 3: select 2 multiselect

//Installation
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>



// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

Example 4: select 2 dropdown

$('#element').select2({
    placeholder: 'Select a option',
    minimumInputLength: 3,
    ajax: {
        url: route('api.fetch-options'),
        dataType: 'json',
        type: 'GET',
        quietMillis: 50,
        data: function (params) {
            return {
                visitor_name: params.term
            }
        },
        processResults({ data }) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name,
                        id: item.id,
                    }
                })
            }
        }
    }
}).change(() => {
	// perform some action on change
});

Example 5: select2

$(".js-example-basic-multiple-limit").select2({
  maximumSelectionLength: 3
});

Example 6: select2 .select2-results .select2-highlighted

$(document).ready(function() {
    $("#menuOption1").select2({dropdownParent: "#menuOption1-container"});
    $("#menuOption2").select2({dropdownParent: "#menuOption2-container"});
});