As a developer our objective is to make things easy. This jQuery plugin will help you to create custom select box with icon or images.
- jQuery
Create select element with a unique id
.
If you want to add images as an icon to option list
then add image url to data-icon
attribute otherwise assign font-awesome icon class
to data-icon
like in given example:
<select id="example" name="currency">
<option value="btc" data-icon="btc.png"> Bitcoin (BTC) </option>
<option value="eth" data-icon="eth.png"> Ethereum (ETH) </option>
<option value="bch" data-icon="bch.png"> Bitcoin cash (BCH) </option>
</select>
Initialize the plugin like below:
$( selector ).IconSelectBox( isImage );
// isImage: boolean;
To add image isImage
should be true
and for icons it should be false
;
Finally you can get the value from your created select element
.
like if you create element #select-action
then you can get value like this
$('#select-action').val();
Nothing complicated.