How get html select > option tag custom attribute value using jquery?

Question

I have research that in html you can add a custom attribute by simply adding data-* attribute inside html tag. I populate my select > option tag from my database:

<td>
  <select onchange='setattr(this)' id='pitemnamerow"+ cnt +"' class='pitemname select2bs4 tselect'>
    <option selected='selected'></option>
  </select>
</td>

My Jquery and already set my custom tag

for (i in data.branditms) {
      $('#pitemname'+brndid.id).append($('<option>', {
      value: data.branditms[i]['item_id'],
      text: data.branditms[i]['item_name'],
      data-um: data.branditms[i]['um'], //custom-tag
}));

DOM result:

<select onchange="setattr(this)" id="pitemnamerow1" class="select2bs4 pitemname tselect select2-hidden-accessible" data-select2-id="pitemnamerow1" tabindex="-1" aria-hidden="true">    
   <option selected="selected" data-select2-id="81"></option>
   <option value="0-RKM51" data-um="PC/s" data-select2-id="84">0-RING 2"DIAMETER</option>
   <option value="UYD983" data-um="M" data-select2-id="84">Parts Wheel</option>
</select>

now when i try to access the custom attribute value it says undefine:

function setattr(brnditem){
    var test = $(this).find('.pitemname').data('um');
    console.log(test);  
}

PS: My table row and select > options are also dynamic.

Any idea?

You don't have any attribute with the name data. what's the value you expect to get? — osman Rahimi
– osman Rahimi, Commented Nov 25, 2020 at 5:54
can you take screenshot of your html tags in inspect mode and attach it to the question because I don't see attribute added name data — osman Rahimi
– osman Rahimi, Commented Nov 25, 2020 at 6:00

kynn · Accepted Answer · 2020-11-25 07:02:53Z

1

Try checking this:

      var test = $(brnditem).find('option:selected').data('um');

also make sure the function was defined right before calling it on the 'select' tag

edited Nov 25, 2020 at 7:02

answered Nov 25, 2020 at 6:49

kynn

413 bronze badges

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

1 Comment

jreloz Over a year ago

still undefined :(

osman Rahimi · Accepted Answer · 2020-11-25 06:54:21Z

0

You should call data() instead attr(), rewrite you code like this :

function setattr(brnditem)
{
  var test = $(brnditem).find("option:selected").data('um');
  console.log(test);  
}

edited Nov 25, 2020 at 6:54

answered Nov 25, 2020 at 6:09

osman Rahimi

1,5171 gold badge11 silver badges27 bronze badges

11 Comments

jreloz Over a year ago

i think there's something wrong with my code. I tried your code but still undefined. please see updated question.

osman Rahimi Over a year ago

I think you shoudl use brnditem in setattr() instead of this

jreloz Over a year ago

$(brnditem).find('.pitemname').data('um'); still undefined.

osman Rahimi Over a year ago

how do you call setattr() and what do you pass as a parameter?

jreloz Over a year ago

onchange='setattr(this)' i have included this in my question.

|

Collectives™ on Stack Overflow

How get html select > option tag custom attribute value using jquery?

2 Answers 2

1 Comment

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related