Image select box instead of text select?

Try this:

jQuery:

$("#selectbox").change(function(){    var selectedIndex = $("#selectbox")[0].selectedIndex;    $('ul#images li').each(function(index) {        if ( index === selectedIndex ) { $(this).show(); }        else { $(this).hide(); }    });});

html:

<select id="selectbox">    <option >Airplane</option>    <option >Bowling</option>    <option >Alarm</option></select><ul id="images">    <li><img src="sample1.jpg" /></li>    <li><img src="sample2.jpg" /></li>    <li><img src="sample3.jpg" /></li></ul>

I would probably use a RADIO button list and have the images inside of LABEL tags attached to each RADIO INPUT.

Here's a simple jsfiddle to demonstrate.http://jsfiddle.net/TnFma/

function createImageSelectList(id, name, arrOptions) {    var $elm = $("#" + id);    for(var x = 0; x<arrOptions.length; x++) {        var opt = arrOptions[x];        var subId = name + "_" + opt.value;        var $rad = $("<input />");        $rad.attr("type", "radio");        $rad.attr("value", opt.value);        $rad.attr("name", name);        $rad.attr("id", subId);        var $lbl = $("<label />");        $lbl.attr("for", subId);        $lbl.append($("<img />")            .attr("src", $("#" + opt.image).attr("src")));        $elm.append($lbl);        $elm.append($rad);    }}

Here's a try with almost pure CSS.

It uses radios to store the selected value ($_POST['thing']), which are wrapped in associated labels. Controlling the visibility of the images on clicks is a little tricky though. Using links and the :target you can make all the images show up when the "select" is clicked, but you still need a way to hide other images when a selection is made. That's why I had to add the onclick attribute on the labels to remove the #select hash. If anyone knows a way to hide it with CSS, I'd love to hear it :)

Using jQuery this is pretty easy to implement. Assuming you have DIV with images inside and a hidden input field:

$('.select').each(function(){  var input = $('input', this),      images = $('img', this),      selecting = false;  images.hide().click(function(){                 // if the select box is open and a image was cliked    if(selecting){      input.val($(this).index() + 1);      images.not(this).hide();    // if select box is closed and the active image was clicked    }else{           images.show();                 }    selecting = !selecting;  }).eq(input.val() - 1).show();    });  

The input field (thing) will store the index of the image...

(fiddle)