改变选择元素？

Question

我想看看这是否可行，我需要将选择元素内容更改为使用图像显示为div，就像颜色选择器一样。当用户选择彩色div上的点击时，我希望在页面上显示图像。我还能在形式隐藏字段中捕获所选项目吗？

这是一个衬衫建筑页面，我有12种颜色，4件衬衫。任何帮助，指导将不胜感激。

我目前的代码非常基本。

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>

基于页面图像的演示在这里.. demo

由于

Answer 1

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

检查演示选择框。

您可以根据选择框选择值更改颜色或图像。

您可以使用jquery add函数添加css或

addClass函数和removeClass用于更改类

Answer 2

我建议您为每个选择器创建一个<div>或<table>框。的 [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; }