Question

我的CS-Cart安装中有一个下拉选项框，其中包含动态创建的值，例如： 3110,3111,3112,3113 ....

我需要根据下拉列表中的选择值更改下拉列表下方的图像。

我正在查看此脚本 - http://www.javascriptkit.com/script/cut173.shtml，但使用该脚本取决于使用手动创建的值。（见下面的编码）

脚本：

<script language="javascript">
<!--
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

HTML：

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="image1.gif">Picture of me</option>
<option value="image2.gif">Picture of my aunt</option>
<option value="image3.gif">Picture of my brother</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="image1.gif" name="pictures" width="99" height="100"></td>
</tr>
</table>

我需要做什么才能引用下拉列表中的值？这是一个一次性的产品，只需要为这一个做，所以不用担心价值变化等...

这是我需要将脚本与之关联的页面前端生成的代码：

<select name="product_data[29821][product_options][742]" id="option_29821_742" onchange="fn_change_options('29821', '29821', '742');" >
<option value="">Choose...</option>                                                                     <option value="3111" >LC </option>
<option value="3110" >LC/A </option>
<option value="3112" >E2000 </option>
<option value="3113" >E2/A </option>
<option value="3114" >FC /option>
<option value="3115" >FC/A </option>
<option value="3116" >ST </option>
<option value="3117" >SC </option>
<option value="3118" >SC/A </option>
</select>

Answer 1

以下是您需要做的事情：

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent(event, func);
  }
}

var select = document.getElementById('picture'); // give your select element an ID for ease and speed of DOM traversal

listen('change', select, function() {
  var val = this.options[this.selectedIndex].value;
  var image = new Image();
  image.src = val;
});

Answer 2

以下代码将提醒onchange事件

上的选定值（不是文本，值）

function selectOnchange(slt) {
    alert(slt.value);
}

<select onchange="selectOnchange(this)"></select>

这可能会帮助你

在下拉列表中更改图像

2 个答案: