Image drop-down in select field

Question

I want to have an image drop-down in which each images are stored in each option field.This must work in chrome.

Answer 1

You Can Use wSelect to add icons or images to select box options

Support : Chrome, IE7+, FireFox, Opera, Safari

wSelect is a fast and lightweight jQuery plugin which turns the default html select elements into customizable and clean looking select boxes with some themes and options. wSelect also allows you to add icons to your select options using data-icon attribute. How to use it:

1. Include jQuery library and jQuery wSelect on your web page

2. Include required jQuery wSelect CSS to style the select elements

3. Create a html select box.

   Select a CountryAustralia Canada Poland Thailand England (United Kingdom)

4. The javacript

   $('select').wSelect(); $('#demo').change(function() { console.log($(this).val()); }); $('#demo').val('AU').change(); // should see in console $('#demo').val('PL').wSelect('change'); // should see the selected option change to three $('#demo').append('United States of America').wSelect('reset'); $('#demo').val('CA').change();

5. More options

   $.fn.wSelect.defaults = { theme: 'classic', // theme size: '4', // default number of options to display (overwrite with size attr on select element) labelPosition: 'left', // set position for label (left,top) highlight: true // highlight fields when selected };

Reference : http://www.jqueryscript.net/form/Customizable-jQuery-Select-Box-Replacement-Plugin-wSelect.html

Also you can use iconselet http://bug7a.github.io/iconselect.js/