Question

I’ve this HTML markup:

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

First I don’t know if I can, arbitrary, use “data” in if is wrong please point me in the right direction. Then following with the problem I would like to change the img#image src with the value from data value in the select#option_select. For that I made this jQuery code:

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

but itsn’t working. Why?

Answer 1

Your data attributes are invalid, 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'));

Note that this refers to your select element not options, you can use :selected selector.