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 :)

Answer 1

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>

Answer 2

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");

Answer 3

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'))
});

Answer 4

 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>

Answer 5

你可以用 jquery 选择器做到这一点

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

Answer 6

$(selector).find("option:selected").data("rc") 用于 rc 和 clnc 用于 clnc 其中选择器是您的“选择”标签 ID/类