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

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

例如：

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

1.
2.
3.
4.

我如何做到这一点

谢谢

编辑：

根据波蒂的建议，这是可行的

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

01
02

编辑：

---

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

您可以使用每个选项的“类”来保存要显示的图像的一些指示器。如果你像现在所有漂亮的人一样用HTML5写作，你可以使用“数据”属性：

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

---

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

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

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

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

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

1.
2.

---

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

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

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

1
2.
3.
4.

这当然是有可能的，但要让服务器端代码负担过重，扔掉多余的东西，或者在提交表单时处理这些东西，似乎很讨厌。当然，如果没有涉及服务器端操作，那也没关系。如何使用'value'属性中的第二个参数？取决于在Javascript或C#中使用值的位置。在JavaScript中，您必须将值拆分为一个子字符串数组，然后选择所创建数组中的第二个元素：在C#中，同样的想法。对字符串使用拆分方法：然后选择数组中的第二个元素。感谢pointy，它现在适用于应用程序？我试过用它，但它不显示图片。嗯。。。我不知道你的意思。也许如果你发布更多的代码会有所帮助。好的，我在我的答案中添加了。您必须使用“getAttribute”来获取这些内容。有一个问题，即如果我刷新页面，图片将显示默认值，但下拉列表中的选择将保留。如何修复？您可以在处理程序中为窗口上的“加载”事件重新初始化页面

window.onload=function（）{…}

您需要使用括号表示法来引用JavaScript中带有特殊字符的属性：

this.options[this.selectedIndex][“data whichPicture”]

请参见：我已经尝试过您的建议，但它不起作用。我认为，映射或关联数组确实是实现这一点的最佳且简单的方法。

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