@@include('global/_head.html',{ "headTitle": "Select 2", "select2": "true", "prism": "true", }) @@include('docs/_sidebar.html', {"page": "formelements"})

@@include('global/_page-header.html', {"PageHeader": "sticky-top"} )

Select 2

How it works

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. For more info, please visit the select2.org

Basic Example

Basic

With OptGroups

Multiple Select

With Clear Button

Max Selection Limit: 2

Loading Data

Loading Array Data

Disabled Option

<!-- plugin css file  -->
<link rel="stylesheet" href="assets/bundles/select2.min.css">

<!-- Plugin Js -->
<script src="assets/bundles/select2.bundle.js"></script>

<!-- Jquery Page Js -->
<script>
	$('.select2').select2();
</script>

@@include('docs/_quick-url.html')

@@include('global/_page-footer.html', {"PageFooter": ""} )

@@include('global/_full-screen-menu.html', {"divClass": ""} ) @@include('global/_need-help.html', {"divClass": "offcanvas-start"} ) @@include('global/_quick-access.html', {"divClass": "offcanvas-end"} ) @@include('global/_theme-setting.html', {"divClass": "offcanvas-end"} ) @@include('global/_site-map.html', {"divClass": "offcanvas-start sm"} ) @@include('global/_body-hero-img-2.html', {"bodyBgClass": "body-bg"} ) @@include('global/_plugin-script.html', { "select2": "true", "prism": "true", "parsley": "true", })