如何使用下拉列表更改图片？

Question

我想使用一个下拉列表，每次单击其中的内容时，都会显示不同的图片。但我不想使用属性“值”，因为我想将这些值用于其他用途。

示例：

<select name='test'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>

我怎样才能做到这一点？

谢谢。

编辑：

根据pointy的建议，它可以工作。

<select name="dpt" onChange="picture.src=this.options[this.selectedIndex].getAttribute('data-whichPicture');" >
<option value="1839" data-whichPicture='./imgs/t1.jpg' >01</option>
<option value="1661" data-whichPicture='./imgs/t2.png' >02</option>
</select>
</select>
<img src='' id='picture' />

编辑：

有一个问题，即如果我刷新页面，将显示默认图片，但下拉列表中的选择将保留。如何解决这个问题？

Answer 1

您可以在“值”字段中放置多个值，并用分隔符分隔它们。
您必须拆分该值并选择显示图像时要使用的值

<option value="1,dogs.jpg">1</option>
<option value="2,hogs.jpg">2</option>
<option value="3,cats.jpg">3</option>
<option value="4,dogs.jpg">4</option>

Answer 2

您可以使用每个选项的“类”来保存要显示的图像的一些指示符。如果您像当今所有美丽的人一样使用 HTML5 编写，则可以使用“数据”属性：

<option value='1' data-whichPicture='http://whatever.com/picture_017.jpg'>1</option>

实际上您可以在标签上粘贴任何您想要的属性，但它会使页面处于无效状态。 HTML5 属性尚未经过验证（我不认为；我上次尝试的 HTML5 验证器相当不可靠），但 W3C 承诺有一天会进行验证。

编辑 - 另外 - 您的问题提到您想要在有人“单击”时更改图片。事实上，您可以从每个获取“click”事件，但您可能还应该监视“change”事件。用户可以使用 Tab 键进入 并使用向上和向下箭头键来更改选择。在用户退出 或单击其他位置之前，您不会收到“change”事件。 （也许可以获得“按键”事件；我没有尝试过，但我可能......）

编辑 - 获取属性（如果您使用“data-”技巧） ，您必须在元素上使用“getAttribute”方法：

var whichPicture = sel.options[sel.selectedIndex].getAttribute('data-whichPicture');

Answer 3

您可以在选项值和图像之间设置映射

{ 1: "imgA.png", 2: "imgB.png" }

，然后使用函数根据此映射加载正确的图像。

另一种方法可能是使用图像名称来增加值，如下所示，

<select name='test'>
<option value='1;imgA.png'>1</option>
<option value='2;imgB.png'>2</option>
</select>

然后使用字符串函数根据需要解析出数值或图像名称。