Javascript 更改选择元素？

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

这是一个衬衫制作页面，我有12种颜色，一件衬衫有4个部分。任何帮助、指导都将不胜感激

我目前的代码是相当基本的

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

})

白色

这里有一个基于页面图像的演示

谢谢

选中“选择”框的演示

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

您可以使用jqueryadd函数添加css或

---

addClass函数和removeClass用于更改类

我建议您为每个选择器创建一个

或

框[]

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;

---

​

听起来你使用一个无线电组和

中的

元素比使用一个select元素要好。你能给我举个例子吗…谢谢我今天发现的一件事-仅供参考-就是你也可以在

addClass

或

removeClass

函数中指定时间跨度。例如，

$（选择器）.addClass（“classToAdd”，1000）。这将使元素淡入该类。或者，将add替换为remove，使其从该类淡入到当前应用的其余类所应具有的任何属性。我想我会提到它，以防你可以用它来做这个。谢谢你优雅的解决方案…我只是不能复制图像来显示。我想我需要我的手，否则我可能会错过回家的巴士。我很抱歉打扰你，我如何将图像添加到屏幕上，只是有点困惑。如果你没有时间，我会理解你有
image.src=color+“.jpg”将图像指定给零件的位置。您可以更改它，使其与您的文件名匹配，这只是一个示例。我尝试过，但失败得很惨。我真的很想使用你的解决方案，但我只是不能正确地思考，使它工作。我需要你的帮助。我不擅长js，你能给我举一个图像变化的例子吗？？谢谢
// 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;

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

.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; }