How to get data attribute of option tag in JavaScript

Question

Want to get data attribute value from selected dropdown option.

<select name="selection" id="mySelect">
    <option value="21" data-rc="25" data-clnc="10">Treatment</option>
</select>

var rc = ? //value of data-rc
var clnc = ? //value of data-clnc

No jQuery please only JavaScript :)

developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset — Andreas
– Andreas, Commented Jul 22, 2016 at 6:46

Gerardo Furtado · Accepted Answer · 2016-07-22 07:35:29Z

48

You can read them out via dataset property.

var option = document.getElementsByTagName("option")[0];

console.log(option.dataset.rc)
console.log(option.dataset.clnc)

<option value="21" data-rc="25" data-clnc="10">Treatment</option>

Or, if you want to get the values of the selected option:

var selection = document.getElementById("mySelect");

selection.onchange = function(event){
  var rc = event.target.options[event.target.selectedIndex].dataset.rc;
  var clnc = event.target.options[event.target.selectedIndex].dataset.clnc;
  console.log("rc: " + rc);
  console.log("clnc: " + clnc);
};

<select name="selection" id="mySelect">
<option value="21" data-rc="25" data-clnc="10">Treatment</option>
<option value="21" data-rc="23" data-clnc="30">Treatment1</option>
<option value="21" data-rc="31" data-clnc="50">Treatment2</option>
<option value="21" data-rc="14" data-clnc="75">Treatment3</option>
</select>

edited Jul 22, 2016 at 7:35

answered Jul 22, 2016 at 6:46

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

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

4 Comments

Govind Samrow Over a year ago

Index is not always 0 :(

Gerardo Furtado Over a year ago

If you want to get the values of the selected option, I edited the answer. If you want to get all the values, you'll have to iterate. Anyway, now you get the general idea.

Lex Soft Over a year ago

Thanks, I forget the options property of the target. Nowadays I tend to be reluctant to dig deeper into HTML elements/nodes with their properties/methods. I prefer using dataset, instead of getAtttibute, although dataset may not work in some browsers.

BigBoiVladica Over a year ago

Your answer gave me a great idea how to fix a similar problem I was having :D cheers

Rao khurram adeel · Accepted Answer · 2016-07-22 06:50:52Z

23

suppose we have a select field

    <select id="ddlViewBy">
      <option value="1" data-rc="25" data-clnc="10" selected="selected">test1</option>
      <option value="2" >test2</option>
      <option value="3">test3</option>
    </select>

Now we will get the select list and its selected option

    var e = document.getElementById("ddlViewBy");
    var option= e.options[e.selectedIndex];

Now we have the selected option we can get its attribtues

    var attrs = option.attributes;

attrs is the attributes array you can get attribtues by index you want.

Or you can get attribtues by

    var datarc = option.getAttribute("data-rc");

answered Jul 22, 2016 at 6:50

Rao khurram adeel

6366 silver badges12 bronze badges

1 Comment

Lex Soft Over a year ago

Good. This is the alternative way for working with data attributes. The other one is using dataset, which I prefer, although may not work in some browsers.

Ritesh Kashyap · Accepted Answer · 2016-07-22 07:44:18Z

6

Check this working pen

working pen

$('#options').on('change', function(){
    alert($(this).find("option:selected").attr('data-rc'))
    alert($(this).find("option:selected").attr('data-clnc'))
});

answered Jul 22, 2016 at 7:44

Ritesh Kashyap

3942 silver badges17 bronze badges

1 Comment

Govind Samrow Over a year ago

No jQuery please only JavaScript

salimido · Accepted Answer · 2020-04-12 13:31:48Z

3

    var mySelect = document.querySelector('#mySelect')
        console.log('mySelect value ' + mySelect.value)
        console.log('mySelect data-rc ' + mySelect.selectedOptions[0].getAttribute("data-rc"))
        console.log('mySelect data-clnc ' + mySelect.selectedOptions[0].getAttribute("data-clnc"))

<select name="selection" id="mySelect">
    <option value="21" data-rc="25" data-clnc="10">Treatment</option>
</select>

answered Apr 12, 2020 at 13:31

salimido

1612 silver badges6 bronze badges

Comments

AB Udhay · Accepted Answer · 2016-07-22 06:48:38Z

1

$(selector).find("option:selected").data("rc") for rc and clnc for clnc where selector is your "select" tag id/class

answered Jul 22, 2016 at 6:48

AB Udhay

7634 silver badges10 bronze badges

2 Comments

Govind Samrow Over a year ago

No jQuery please only JavaScript

Lex Soft Over a year ago

No jQuery. Instead, use DOM API, from which we can use either dataset property or getAttribute method of the corresponding DOM element.

Tayyab Hayat · Accepted Answer · 2023-03-11 05:57:48Z

1

If anybody looking for the simplest answer, here is the solution.

Javascript:

function getURL()
{
    var link = $("#title :selected").data('link');
    console.log(link);
}

HTML:

<select id="title" onchange="getURL()">
    <option data-link="https://www.google.com" value="1">Single</option>
    <option data-link="https://www.google.com/search" value="2">Double</option>
</select>

Happy Programming!!!

answered Mar 11, 2023 at 5:57

Tayyab Hayat

9631 gold badge11 silver badges24 bronze badges

Comments

kargav · Accepted Answer · 2016-07-22 06:47:44Z

0

You can do that with jquery selector

var rc = $('select option:selected').data('rc');

answered Jul 22, 2016 at 6:47

kargav

1

1 Comment

Lex Soft Over a year ago

No, it's said above that no jQuery. There are 2 correct answers that other guys had given : one using dataset, the other using getAttribute. All use plain DOM API, no jQuery involved.

Collectives™ on Stack Overflow

How to get data attribute of option tag in JavaScript

7 Answers 7

4 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related