CODEWITHSUNDEEP
jqueryhtmlselect
Björn C
Björn C

Reputation: 4008

Fetch chosen options attribute with Jquery

So i have several selects with several options.
Now i'd like to fetch the chosen values and attributes.

HTML

<select class="namnTillagg">
  <option value="+fotpl" data-enhet="st">+fotpl</option><option value="+toppl" data-enhet="st">+toppl</option><option value="1 svpl" data-enhet="st">1 svpl</option>
</select>

Jquery

$('.namnTillagg').each(function(){ 
    var temp = $(this);
    namnTillagg[a] = temp.val();
    a++;
})

With this Jquery i'm able to fetch all my selected selects value.
Now i'd like to fetch the arrtibute "data-enhet" from the selected option/value
How can i do this?

Example Code

$('.namnTillagg').each(function(){ 
    var temp = $(this);
    namnTillagg[a] = temp.val();
    enhetTillagg = $(temp.val(namnTillagg[a]).attr('data-enhet'); //Can i do it something like this?
    a++;
})

Upvotes: 1

Views: 49

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to find selected option in current select along with .data() to find its data property or .attr() to find its data attribute value:

temp.find(':selected').data('enhet');

You can also use index parameter of .each() rather than maintaining different variable a:

Full Snippet:

$('.namnTillagg').each(function(i){ 
 var temp = $(this);
 namnTillagg[i] = temp.val();
 enhetTillagg[i] = temp.find(':selected').data('enhet'); 
})

Upvotes: 1

Related Questions