Custom Dropdown Select With Option Icons - customSelect

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.

<link rel="stylesheet" href="customSelect.jquery.css">

2. Create a hidden input field for the custom select.

<input type="hidden" id="countrySelecter" value="">

3. Load jQuery library and the jQuery customSelect plugin at the end of the HTML document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="customSelect.jquery.min.js"></script>

4. Define your own data & template in the JavaScript.

var myOptions = [
    ['ct', 'ct.png', 'Catalonia'],
    ['es', 'es.png', 'Spain'],
    ['gb', 'gb.png', 'Great Britain'],
    ['de', 'de.png', 'Germany'],
    ['it', 'it.png', 'Italy'],
    ['fi', 'fi.png', 'Finland'],
    ['fr', 'fr.png', 'France']
],

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.

$.customSelect({
  identifier: 'demo',
  selector: '#countrySelect',
  placeholder: 'Select your country',
  options: myOptions,
  template: myTemplate
});

6. Get the selected country stored in the hidden input.

$('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.