0

我有这个 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中的数据值更改img#image src。为此，我制作了这个 jQuery 代码：

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

但它不工作。为什么？

4

1 回答 1

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选择器。

于 2012-10-09T00:56:59.000 回答