How to get the $.data() on the option inside the dropdown?

Question

$('#selectSurvey').append('<option value="1" data-img="/path/image.png">'+ Option1 +'</option>');

$('#selectSurvey').on('change',function(e){
    $('#image-here').attr('src',this.data('img')); //wrong
});

How do I get the data in Option1 inside the dropdown on change?

Answer 1

Try to grab the selected option from the select element then retrieve the data,

$('#selectSurvey').on('change',function(e){
  $('#image-here').attr('src',$(this).find('option:selected').data('img')); 
});

Since the data-img has been set with the option element not with the select.

Answer 2

You can try this:-

$('#selectSurvey').on('change',function(e){
   var img = $(this).find('option:selected').attr('data-img');
   $('#image-here').attr('src',img); 
});

or use .data() (if your jQuery version is newer ie >= 1.4.3)

$('#selectSurvey').on('change',function(e){
   var img = $(this).find('option:selected').data('img');
   $('#image-here').attr('src',img); 
});