A beautiful select box based on jQuery / Bootstrap
The selectr is a jQuery plug-in for creating the pretty select box on your website that allows multi-selection along with searching the options. You may limit the maximum number of selections as well.
In the Bootstrap based select component, I showed you a few demos of creating cool select dropdowns as using the Bootstrap framework.
In this tutorial, you will see beautiful select boxes that you may use with Bootstrap as well as non-Bootstrap based projects.
A demo of jQuery select with Bootstrap
In this demo, a selectr based select box is created for choosing the skills. You may select up to five skills by clicking the “+” sign ahead of each option as you bring the mouse over that option. You may also notice that different color codes are used for each option by using data attribute:
See online demo and code
The markup for the example:
<div class="row">
<div class="col-sm-3">
<!-- Using data attributes -->
<select name="foods" data-selectr-opts='{ "title": "Your Expertise? (select max 5)", "placeholder": "Search skills", "maxSelection": 5 }' multiple>
<option data-selectr-color="rgb(1000, 163, 150)" value="Bootstrap">Bootstrap Framework</option>
<option data-selectr-color="rgb(255, 105, 158)" value="jQuery" selected>jQuery</option>
<option data-selectr-color="rgb(155, 0, 133)" value="HTML">HTML</option>
<option data-selectr-color="rgb(185, 48, 122)" value="CSS">CSS</option>
<option data-selectr-color="rgb(123, 182, 101)" value="PHP" selected>PHP</option>
<option data-selectr-color="rgb(229, 183, 55)" value="MySQL">MySQL</option>
<option data-selectr-color="rgb(135, 214, 139)" value="ReactJS">ReactJS</option>
</select>
</div>
</div>
The jQuery code:
<script>
$(document).ready(function () {
$("select").selectr({
title: 'What are your expertise?',
placeholder: 'Search Expertise'
});
});
</script>
You can see, a search box is also displayed where you may enter characters to shortlist the options in the select box. For example, just type “P” and it will display the PHP and Bootstrap framework options only:
How to set up this plug-in on your website?
First of all, grab the plug-in by visiting the developer’s page on the Github website here. You may also get the required selectr.js file by view source the demo page and download this file on your local system.
After downloading, refer that JS file after the references of jQuery and Bootstrap files:
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js”></script>
<script src=”js/selectr/selectr.js”></script>
The Bootstrap reference is required if your project is based on the Bootstrap framework. If it is a non-Bootstrap then get the selectrWithPolyfill.css file from zipped package.
Use the jQuery code and markup as shown in above demo.
Setting different options of the select box
You may set the options available for the select box plug-in by using the jQuery code or by HTML 5 data attributes. For example, data-selectr-color data attribute can be used for the color code of each option. This is also used in the above demo.
Besides, you may use the title, maxListHeight, tooltipBreapoint, maxSelection options in the jQuery code. Similarly, noMatchingOptionsText can be used for displaying the text if the search does not return any result.
You may explore more options by visiting the above provided link.