Change text of option value with image

Question

I need change text for images in option value. My html code is this:

<select id="topics" class="taxonomies-filter-widget-input" name="topics">
<option value="0">Todas</option>
<option class="level-0" value="unaestrella">Una Estrella</option>
<option class="level-0" value="dosestrellas">Dos Estrellas</option>
<option class="level-0" value="tresestrellas">Tres Estrellas</option>
<option class="level-0" value="cuatroestrellas">Cuatro Estrellas</option>
<option class="level-0" value="cincoestrellas">Cinco Estrellas</option>
</select>

I will like change "Una Estrella" for image "http://www.domain.com/images/unaestrella.png" for example. Is this possible?

thanks!

Answer 1

no it is not . becuase option element can only have text . but you can change the tex with jquery using

$('option[value="unaestrella"]').text('some lame text')

or you can take a look at some jquery plugins (which mimic the select functionality to enable you to have images in them ) just like @PLS said ;

here are some plugins :

ddSlick

Image Picker

how to use ddSlick

first you need to creat an array of objects just like this

//Dropdown plugin data
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];

and then just

$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});

note: the code above is taken staight from the website :) .