Select2 Single Select Example

Select2 Single Select Example www.BryteStudio.com

by lemon kazi

HTML

<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link rel="stylesheet" href="http://select2.github.io/select2/select2-3.5.1/select2.css">
<body>Single select example
    <div class="selectRow">
        <select id="singleSelectExample">
            <option></option><!-- Needed to show X image to clear the select -->
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

CSS

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

JavaScript

// Setting default configuration here or you can set through configuration object as seen below
$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
    allowClear: true, // Adds X image to clear select
    closeOnSelect: true, // Only applies to multiple selects. Closes the select upon selection.
    placeholder: 'Select...',
    minimumResultsForSearch: 15 // Removes search when there are 15 or fewer options
});

$(document).ready(

function () {

    // Single select example if using params obj or configuration seen above
    var configParamsObj = {
        placeholder: 'Select an option...', // Place holder text to place in the select
        minimumResultsForSearch: 3 // Overrides default of 15 set above
    };
    $("#singleSelectExample").select2(configParamsObj);
});