更改选择元素？

发布于 2024-09-26 15:05:23 字数 745 浏览 1 评论 0原文

我想看看这是否可行，我需要使用图像（就像颜色选择器一样）更改要显示为 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>

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

谢谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒中人 2024-10-03 15:05:23

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

或

框。 [工作演示]

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

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

回复收藏 0 原文