change select element?

Question

I want to see if this is possible, i need to change a select element content to be displayed as divs using images just like a color picker. when the user selects clicks on a colored div i want an image to be displayed on the page. Also would i still be able to capture the selected item in a form hidden field?

It's a shirt building page, i have 12 colours, and 4 parts to a shirt. Any help, guidance would be appreciated.

My current code is below pretty basic.

function swapImage(){
 var image = document.getElementById("neck");
 var dropd = document.getElementById("imageneck");
 image.src = dropd.value;    

};

<select name="imageneck" id="imageneck" onChange="swapImage()"> 
   <option value="WHITE-4.png">White</option>
</select>

<div id="poloneck"><img id="neck" src="WHITE-4.png" /></div>

A demo of the page image based is here ..demo

Thanks

Answer 1

http://api.jquery.com/val/

Check the demo for select box.

You can change your color or image based on select box selected value.

You can use jquery add function for adding css or

addClass function and removeClass for changing class

Answer 2

I suggest you creating a <div> or <table> box for every picker. [Working demo]

Javascript

// instead of swapImage
function setImage(subject, color) {
 var image = document.getElementById(subject);
 image.src = color + ".jpg";  // e.g.: white.jpg
}

// general click event handler for changing color
function pickerClick(e) {
  // event -> which box -> which color
  e = e || event; 
  var target = e.target || e.srcElement;
  if ( target.nodeName.toUpperCase() != "TD" ) return;
  var color  = target.className;
  var picker = target.parentNode.parentNode;
  // change <input> field
  document.getElementById("imageneck").value = color;
  // change appearance
  setImage(picker, color);
}

// a specific click handler for neck
var collarbox = document.getElementById('collar');
collarbox.onclick = pickerClick;

HTML

<table class="picker" id="collar">
  <tr>
    <td class="white"></td>
    <td class="black"></td>
    <td class="red"></td>
    <td class="blue"></td>
  </tr>
</table>

CSS

.white { background: white }
.black { background: black; }
.red   { background: red; }
.blue  { background: blue; }
.picker { border: 1px solid #ccc; }
.picker td { width:30px; height: 30px; cursor: pointer; }

​