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

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>

我该如何完成？

谢谢。

编辑：

在尖尖的建议下，它有效。

<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

您可以使用每个选项的“类”来显示要显示的图像。 如果您现在像所有的Beautiful People一样使用HTML5编写代码，则可以使用“数据”属性：

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

实际上，您可以将所需的任何属性粘贴到标签上，但是它将使页面处于无效状态。 HTML5属性尚未得到验证（我不认为；我上次尝试使用的HTML5验证器是很狡猾的），但是W3C承诺有一天会成为现实。

编辑 -同样-您的问题提到您想在有人“点击” <select>时更改图片。 实际上，您可以从每个<option>获得“ click”事件，但是您可能还应该注意“ change”事件。 用户可以使用Tab键进入您的<select>然后使用上下箭头键更改选择。 除非用户从<select>跳出或单击其他位置，否则您将不会获得“更改”事件。 （可能有可能获得“按键”事件；我没有尝试过，但我可能...）

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

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

Answer 2

您可以在选项值和图像之间建立映射

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

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

另一种方法可能是使用图像名称来增加值，例如这样，

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

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

Answer 3

您可以使用定界符将多个值放在“值”字段中。 您必须拆分值并选择要在显示图像时使用的值

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