jQuery 更改图像与选择不工作

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

更新 fiddle :http://jsfiddle.net/979vbv0j/2/