Question

我正在尝试使用单独的图像同时更改多个图像。 perl正在为我改变图像的路径。

function swapImage(){
var image = document.getElementById("imageToSwap");
var image2 = document.getElementById("imageToSwap2");
var image3 = document.getElementById("imageToSwap3");
var dropd = document.getElementById("dd");
image.src = dropd.value;    
    image2.src=arr[dropd.value];
    image3.src=arr[dropd.value];

};

  <select name="buttonstuff"  id="dd" onChange="swapImage()">
              <option value="http://upperboards.com/hosted/images/buttonset/but-lpurple/homepage.gif" selected>but-purple</option>
              <option value="http://upperboards.com/hosted/images/buttonset/but-red/homepage.gif">but-red</option>
               <option value="http://upperboards.com/hosted/images/buttonset/but-green/homepage.gif">but-green</option>
               </select>
               <img id="imageToSwap" src="http://upperboards.com/hosted/images/buttonset/but-lpurple/homepage.gif"/>
               <img id="imageToSwap2" src="http://upperboards.com/hosted/images/buttonset/but-lpurple/icq.gif"/>
               <img id="imageToSwap3" src="http://upperboards.com/hosted/images/buttonset/but-lpurple/aim.gif"/>

Answer 1

由于您的图片都在同一个文件夹中，因此您可以将该文件夹用作value的{{1}}。这使得更改所有图像变得非常简单。

HTML：

<option>

JS：

<select name="buttonstuff" id="dd" onChange="foo()">
    <option value="but-lpurple" selected>but-purple</option>
    <option value="but-red">but-red</option>
    <option value="but-green">but-green</option>
</select>

I've updated your fiddle

从一个下拉菜单显示多个图像

1 个答案: