“data-” attribute as javascript parameter is not working in chrome

Question

HTML:

<select name="employee_ID" id="employee_ID" onchange="$('#IncomeTaxDeduction').val($('#employee_ID').find(':selected').data('incomtax'));"> 
             <option value="" disabled selected style="display:none;">Select</option>          
          <?php foreach ($employee_data as $emp_opt_value): ?>
             <option  value="<?php echo $emp_opt_value['ID']; ?>" data-incomtax= "<?php echo $emp_opt_value['IncomeTaxPercent']; ?>" onclick="deductions(this)" > <?php echo $emp_opt_value['ID']; ?></option>
          <?php endforeach; ?>
</select>

JS:

var itdeduction;

function deductions(obj){
   itdeduction = parseFloat(obj.getAttribute('data-incomtax'));

   alert(itdeduction);
}

This 'data-' attribute works very well in firefox but it is not working in google chrome. Can somebody kindly help me.

Answer 1

Following is the approach to get data attributes is JS:

 <script> function getData() { alert(document.getElementById('sample').getAttribute('data-name')); } </script> <li id="sample" data-name="test">Sample</li> <br/> <button onClick="getData();">Get Attribute Value</button> 

Your code edit:

 <script> var itdeduction; function deductions(){ var element = document.getElementById('employee_ID'); itdeduction = parseFloat(element.options[element.selectedIndex].getAttribute('data-incomtax')); alert(itdeduction); } </script> <select name="employee_ID" id="employee_ID" onchange="deductions();"> <option value="12" data-incomtax= "20">Some Name</option> <option value="13" data-incomtax= "30">Another Name</option> </select> 

What does element.options[element.selectedIndex] do?

It selects the selected option for the select box. example: if somename is selected then element.options[element.selectedIndex] will give us <option value="12" data-incomtax= "20">Some Name</option>