事件不会在更改时触发，错误在哪里

Question

我有这个HTML标记：

<img id="image" alt="Eye Lights Liners" title="Eye Lights Liners" src="http://kg.devserver/image/cache/data/llipsplatsqpkgmn-228x228.jpg">

<select name="option[227]" id="option_select">
  <option value=""> --- Please Select --- </option>
  <option data="http://kg.devserver/image/cache/no_image-50x50.jpg" value="19">Black Knight</option>
  <option data="http://kg.devserver/image/cache/no_image-50x50.jpg" value="18">Angel</option>
  <option data="http://kg.devserver/image/cache/no_image-50x50.jpg" value="17">Amorous</option>
  <option data="http://kg.devserver/image/cache/data/42llpkgmn-50x50.jpg" value="20">Vegas Volt</option>
</select>

首先，我不知道是否可以随意使用“数据”，如果错误，请指出正确的方向。 然后跟着这个问题，我想用select＃option_select中的data值更改img＃image src。 为此，我编写了以下jQuery代码：

$('#option_select').change(function(e){
    $('#image').attr('src', $(this).attr('data'));
});

但没有用 为什么？

Answer 1

您的数据属性无效， data-arbitraryName 。

<option data-src="http://kg.devserver/image/cache/no_image-50x50.jpg" value="19">Black Knight</option>

$('#image').attr('src', $(':selected', this).data('src'));

注意， this是指选择元素而不是选项，可以使用:selected选择器。