My dropdown has a custom attributes and what I want to happen is to display the custom attributes value in a label tag.
Here is a code snippet:
function setDesignation(d){
var designation = d.getAttribute("data-designation");
if(designation != null){
document.getElementById('designation').innerHTML = designation;
}else{
document.getElementById('designation').innerHTML = 'Name';
}
//alert(d.getAttribute("data-designation"));
}<div>
<select onchange="setDesignation(this)">
<option value="1" data-designation="President">Mathew</option>
<option value="2" data-designation="CEO">Mark</option>
<option value="3" data-designation="Manager">Luke</option>\
<option value="4" data-designation="">John</option>
</select>
</div>
<div>
<label id="designation">Designation</label>
</div>The problem is that I can't get the value of the custom attributes which is the "data-designation". I tried to put it in an alert() method to see the value and it says "null". Even I remove the if else statement it still returns null. I don't know what wrong with the code so please help me.
I tried to find solution but all that I found are jQuery. I'm not good in jQuery so I would like a PURE JAVASCIPT solution.
P.S. if your solution is to store it in the value attribute then thats not what I'm looking for.
You dont want the selects data attribute, you want the selected options data attribute:
var designation = d.options[d.selectedIndex].getAttribute("data-designation");
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments