Question

我想在下拉菜单上做一个简单的图像更改，但由于某些原因我无法正常工作，有人能告诉我我缺少的内容吗？

Jsfiddle here有代码。

谢谢你们！

$("#display_avatar").change(function(){
    $("img[name=preview]").attr("src", $("option").attr("imagePath"));
    event.preventDefault();
});

<img src="http://placehold.it/100/0000FF/000000" name="preview" /><br /><br />

<select class="form-control" name="display_avatar" id="display_avatar">
    <option value="1" imagePath="http://placehold.it/100/cccccc/000000">First</option>
    <option value="2"imagePath="http://placehold.it/100/ghghgh/000000">Second</option>
    <option value="3"imagePath="http://placehold.it/100/5fgrty/000000">Third</option>
    <option value="4"imagePath="http://placehold.it/100/ff0000/000000">Fourth</option>
</select>

Answer 1

这只会从第一个选项中获取值：

$("option").attr("imagePath")

试试这个：

this.selectedOptions[0].getAttribute("imagePath")

更新了小提琴：http://jsfiddle.net/979vbv0j/2/

Answer 2

$("option")会返回页面上的所有option。要做你想做的事，你需要这样做：

$("#display_avatar").change(function(){
    $("img[name=preview]").attr("src", $(this).find("option:selected").attr("imagePath"));
    event.preventDefault();
});

请检查：jQuery Get Selected Option From Dropdown

更新：工作样本：http://jsfiddle.net/vm6zjobj/1/

jQuery更改图像，选择不起作用

2 个答案: