Question

我想使用下拉列表，每次点击其中的内容时，都会显示不同的图片。但我不想使用属性'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>

我如何实现这一目标？

感谢。

修改：

有尖尖的建议，它有效。

<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

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

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

实际上，您可以在标签上粘贴所需的任何属性，但它会使页面处于无效状态。 HTML5属性尚未验证（我不认为;我上次尝试的HTML5验证器非常狡猾），但W3C承诺它们将在某一天出现。

编辑 - 另外 - 您的问题提到当有人“点击”<select>时您想要更改图片。实际上，您可以从每个<option>获取“点击”事件，但您也应该注意“更改”事件。用户可以使用Tab键切换到<select>并使用上箭头键和下箭头键来更改选择。在用户选中<select>或点击其他位置之前，您不会收到“更改”事件。（有可能获得“按键”事件;我没有尝试过，但我可能会......）

编辑 - 要获取属性（如果使用“data-”技巧），则必须对元素使用“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>

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

3 个答案: