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

我想使用一个下拉列表，每次点击它的内容时，都会显示不同的图片。但我不想使用该属性的'值'，因为我想使用这些值用于其他用途。如何使用下拉列表更改图片？

例子：

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

编辑：

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

来源

2010-05-27 Alex SUN

时，您需要使用括号符号来指代性与JavaScript中的特殊字符使用一个： 'this.options [ this.selectedIndex] [“data-whichPicture”]' 请参阅：http://www.dev-archive.net/articles/js-dot-notation/ – RoToRa 2010-05-27 14:15:52

我试过你的建议，它不起作用。 – 2010-05-27 14:29:16

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

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

可以在事实上任何粘你想在你的标签属性，但它会离开页面处于无效状态。 HTML5属性还没有得到验证（我不认为;我上次尝试的HTML5验证器相当不友好），但W3C承诺他们将在某一天。

编辑 —也 - 你的问题中提到，要更改图片，当有人“点击”的<select>。事实上，您可以从每个<option>获得“点击”事件，但您应该也可以观察“更改”事件。用户可以键入您的<select>并使用向上和向下箭头键来更改选择。直到用户退出<select>或在其他地方点击，您才会收到“更改”事件。（这可能是可能得到“按键”事件;我还没有试过，但我会......）

编辑 —要获得的属性（如果使用“数据 - ”招）您必须使用“的getAttribute”方法上的元素：

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

来源

2010-05-27 13:45:15 Pointy

非常感谢，它现在适用于应用程序？我试图使用它，但它不显示图片。 – 2010-05-27 14:00:23

呃......我不确定你的意思。也许如果你发布了更多的代码，它会有所帮助。 – Pointy 2010-05-27 14:02:15

我已更新帖子，你可以检查它吗？ – 2010-05-27 14:10:56

您可以设置选项值和图像

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

，然后使用功能之间的映射加载正确的图像基于这个映射。

另一种方法可能是用形象的名字，以增加价值，这样，

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

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

来源

2010-05-27 13:49:47 Sijin

地图或关联数组真的是这样做的最好和最简单的方法，即imo。 – 2010-05-27 14:58:02

您可以在'value'字段中使用分隔符分隔多个值。你将不得不拆分值，然后选择要显示你的形象

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

来源

2010-05-27 13:50:29

这当然是可能的，但似乎很烦人，必须抛弃额外的东西来加重服务器端代码，或者在表单提交时不得不处理这些问题。当然，如果不涉及服务器端的行为，那么这并不重要。 – Pointy 2010-05-27 13:52:39

如何在'value'属性中使用第二个参数？ – 2010-05-27 14:17:27

取决于您在JavaScript或C＃中使用Value的位置。在JavaScript中，您必须将值拆分为一个子字符串数组，然后选择所创建的数组中的第二个元素： http://www.tizag.com/javascriptT/javascript-string-split.php 在C＃中，相同的想法..使用字符串拆分方法： http://dotnetperls.com/string-split 然后选择数组中的第二个元素。 – 2010-05-27 14:42:04

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

回答

相关问题