jQuery Data Attribute not getting values

Question

jQuery Data Attribute not working on the most simplest demo possible...

$( document ).ready(function() {

  $("#font_selection").change(function(){
    var fontImgName = $(this).data('font-img');
    //var fontImgName = $("#font_selection").data('font-img');

    //var fontImgName = $(this).attr('data-font-img')
    //var fontImgName = $("#font_selection").attr('data-font-img')

    alert(fontImgName);

  });

});

I must be missing something, I have tried every combination I can think of with no success, please help!

JSFiddle Demo here http://jsfiddle.net/8fvo3kw0/1/

HaBo · Accepted Answer · 2014-08-28 19:59:43Z

2

http://jsfiddle.net/8fvo3kw0/3/

$( document ).ready(function() {

  $("#font_selection").change(function(){
    var fontImgName = $(this).find('option:selected').data('font-img');      
    alert(fontImgName);
  });

});

answered Aug 28, 2014 at 19:59

HaBo

14.4k39 gold badges120 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2014-08-28 19:58:39Z

2

You need to look at the selected option element:

var fontImgName = $(this).find('option:selected').data('font-img');

jsFiddle example

answered Aug 28, 2014 at 19:58

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Mritunjay · Accepted Answer · 2014-08-28 19:58:54Z

1

You are trying to get the data attribute of select & your select doesn't have data attribute.

I think you want data attribute for selected Item

Use bellow

var fontImgName = $(this).find(':selected').data('font-img');

DEMO

answered Aug 28, 2014 at 19:58

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-08-28 19:59:54Z

1

That is because you're referencing to the select element itself.

var fontImgName = $(this).find('option:selected').data('font-img');

This would find the option that is selected and then access the data attribute of it. What you're doing is, you're selecting the data atribute's value of the select. In your HTML select doesn't have a data- attribute at all.

answered Aug 28, 2014 at 19:59

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery Data Attribute not getting values

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related