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＃imagesrcを変更したいと思います。そのために私はこの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オプションではなくselect要素を参照していることに注意してください。selectorを使用できます:selected。

于 2012-10-09T00:56:59.000 に答える