jquery - 使用 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 .

标签： jquerycustom-attributesmultiple-select

Answer 1

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple name="tax[]" id="tax_classes">
  <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>

如果您想坚持使用纯 JS，请按以下步骤操作：

document.querySelector('#tax_classes').addEventListener('change', function() {
  var options = Array.from(this.options).filter(o => o.selected).map(o => o.dataset.percentage);
  console.log(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple name="tax[]" id="tax_classes">
  <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>