Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Stack Snippet Starter Pack
HTML
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select class="select2">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
JavaScript
$('.select2').select2();
// get data when an option is selected
$('.select2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data.id, data.text);
// other data, eg get data-more:
$(data.element).data("more")
});
// language example changing no results
$('.select2').select2({
language: {
noResults: function () { return "try again"; }
}
});