作为javascript参数的“data-”属性在chrome中不起作用答案

【问题标题】：“data-” attribute as javascript parameter is not working in chrome作为javascript参数的“data-”属性在chrome中不起作用
【发布时间】：2017-04-12 16:07:17
【问题描述】：

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

这个 'data-' 属性在 firefox 中运行良好，但在 google chrome 中不起作用。谁能帮帮我。

【问题讨论】：

从哪里/如何调用deductions()？此外，我建议使用不显眼的事件处理程序
试试obj.dataset.incomtax。
onclick="deductions(this)"
这伤害了我的眼睛。另外，可能会有所帮助stackoverflow.com/questions/12844618/…
@Lewis 谢谢。您的参考链接在 chrome、firefox、Edge 中完美运行

标签： javascript html google-chrome html-dataset

【解决方案1】：

以下是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>

您的代码编辑：

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

element.options[element.selectedIndex] 有什么作用？

它为选择框选择选定的选项。例子：如果选择了某个名称，那么element.options[element.selectedIndex] 将给我们<option value="12" data-incomtax= "20">Some Name</option>

【讨论】：