How to get data attribute of option tag in JavaScript
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'))
});
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");
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>
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>