javascript - 更改选择元素？

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

我建议您创建一个 <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; }

​