使用Jquery从多个选择选项中获取自定义属性值

Question

我想从多个选择中获得自定义属性值，这是我的html，代码

<select multiple name="tax[]" id="tax_classes" onChange="getSelectedOptions(this)">  
   <option value="2" data-percentage="9.00">CGST(9.00%)</option>  
   <option value="1" data-percentage="18.00">GST(18.00%)</option> 
   <option value="3" data-percentage="9.00">IGST(9.00%)</option> 
   <option value="4" data-percentage="12.00">Tax(12.00%)</option> 
</select>

从上面的标签，我想获取data-percentage属性值。

这里是我到目前为止尝试过的脚本

function getSelectedOptions(tax) 
{
  var options = [], option;
  var len = tax.options.length;
  for (var i = 0; i < len; i++) {
    option = tax.options[i]; 
    if (option.selected) { 
      options.push(option); 
      alert(option.value); 
    }
  }  
} 

我将输出为2,1,3，

但是我的预期输出是9.00, 18.00, 9.00 。

Answer 1

function getSelectedOptions() {
  var options = [],
    option;
  var tax = document.getElementById('tax_classes');
  var len = tax.options.length;
  console.clear();
  for (var i = 0; i < len; i++) {
    option = tax.options[i];
    if (option.selected) {
      options.push(option);
      console.log(option.getAttribute('data-percentage'));
    }
  }
}
 
window.addEventListener('DOMContentLoaded', getSelectedOptions);

<select multiple name="tax[]" id="tax_classes" onChange="getSelectedOptions()">
  <option value="2" data-percentage="9.00">CGST(9.00%)</option>
  <option value="1" data-percentage="18.00" selected>GST(18.00%)</option>
  <option value="3" data-percentage="9.00">IGST(9.00%)</option>
  <option value="4" data-percentage="12.00" selected>Tax(12.00%)</option>
</select>

构建所选data元素的option属性数组的最简单方法是使用map()。 

还请注意，内联事件处理程序不被视为最佳实践；您应该改用低调的事件处理程序。正如您已经在页面中包含jQuery一样，下面是如何执行此操作的示例：

$('#tax_classes').on('change', function() {
  var options = $(this).find('option:selected').map(function() {
    return $(this).data('percentage');
  }).get();
  console.log(options);
});

Answer 2