This time I will share jQuery Plugin and tutorial about Custom Dropdown Select With Option Icons – customSelect, hope it will help you in programming stack.
customSelect is a jQuery plugin which converts a hidden input into a dropdown select element with custom styles & templates.
The plugin dynamically renders options from JS objects and allows you to add custom icons to options via the template options.
Ideal for country, language, user selectors/pickers and more.
How to use it:
1. Load the stylesheet customSelect.jquery.css for the basic styling of the custom select.
1 |
<link rel="stylesheet" href="customSelect.jquery.css"> |
2. Create a hidden input field for the custom select.
1 |
<input type="hidden" id="countrySelecter" value=""> |
3. Load jQuery library and the jQuery customSelect plugin at the end of the HTML document.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="customSelect.jquery.min.js"></script> |
4. Define your own data & template in the JavaScript.
02 |
['ct', 'ct.png', 'Catalonia'], |
03 |
['es', 'es.png', 'Spain'], |
04 |
['gb', 'gb.png', 'Great Britain'], |
05 |
['de', 'de.png', 'Germany'], |
06 |
['it', 'it.png', 'Italy'], |
07 |
['fi', 'fi.png', 'Finland'], |
08 |
['fr', 'fr.png', 'France'] |
11 |
var myTemplate = "<div class='jqcs_option' data-select-value='$0' style='background-image:url(example_icons/$1);'>$2</div>" |
5. Initialize the plugin to activate the country selector.
3 |
selector: '#countrySelect', |
4 |
placeholder: 'Select your country', |
6. Get the selected country stored in the hidden input.
1 |
$('input#countrySelect')[0].value |
This awesome jQuery plugin is developed by BanNsS1. For more Advanced Usages, please check the demo page or visit the official website.
