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.