Get custom attribute value from multiple select option using Jquery

Question

I want to get custom attribute value from multiple select, here is my html,code

From above tag, I wanted to get the data-percentage attribute value.

Here is the script what i tried so far

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

I am getting output as 2,1,3,

But my expected output is 9.00, 18.00, 9.00 .

user_519413 · Answer

The easiest way to build an array of the data attributes of the selected option elements is to use map().

Also note that inline event handlers are not considered best practice; you should use unobtrusive event handlers instead. As you've already included jQuery in the page, here's an example of how to do that:

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

If you want to stick with plain JS, here's how to do that:

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

user_995800 · Answer

You say that you want to get the attribute value, but you are logging .value instead, which refers to the value attribute. You need to use getAttribute('data-percentage') instead.

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

Get custom attribute value from multiple select option using Jquery

2 Answers