I could use the html variation and grab all the necessary data from a database. However I need the image to be outside of the <option> tag because if I have 100 images at 200px high thats going to be a lot of scrolling to go through.

<select id="demo-htmlselect">
        <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">Foursquare</option>
    </select>

I was investigating the possibilty of perhaps moving the image out of the <option> tag using a <span> with abosolute positioning however I can't even get the basics to work, what gives. I've coppied the html version, downloaded the ddslick.js and hooked it all up but no images show. Checked images are at the correct url location as in the demo.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="ddslick.js"></script>

<script type="text/javascript">

$('#demo-htmlselect').ddslick({

    onSelected: function(selectedData){

        //callback function: do something with selectedData;

    }  

});

</script>

  <select id="demo-htmlselect">

        <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"

            data-description="Description with Facebook">Facebook</option>

        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"

            data-description="Description with Twitter">Twitter</option>

        <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"

            data-description="Description with LinkedIn">LinkedIn</option>

        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"

            data-description="Description with Foursquare">Foursquare</option>

    </select>

Sudarshan Thiagarajan wrote:

 

What is showing up with the code you already have? At least a simple plain dropdown or not that too?

The dropdown is showing but no images. However your other suggestion looks better:

http://stackoverflow.com/questions/2663552/how-to-display-image-when-c lick-the-select-option-using-jquery-css

Have you managed to get it working? Nothing changes for me when I use this set up:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

$(function() {

  $("select[name=payment]").bind("change", function() {

    $("#payment img").attr('src', $(this).val().toLowerCase() + ".gif");

  }).change();

});

I'm assuming 'paypal.gif' below should change to 'bank.gif' when the option 'Bank' is chosen?

<div id="payment"><img src="paypal.gif" alt="paypal" /></div>

<form action="image_in_folder.php" method="post">

<select name="payment">

<option value="">Please Select</option>

<option value="Paypal">Paypal</option>

<option value="Bank">Bank</option>

</select>

</form>