Get custom attribute value from multiple select option using jQuery

Question

I want to get a custom attribute value from multiple select.

Here is my HTML code:

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

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 .

Rory McCrossan · Accepted Answer · 2019-10-28 09:51:16Z

4

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

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

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

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

edited Oct 28, 2019 at 9:51

answered Oct 28, 2019 at 9:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lets-c-codeigniter Over a year ago

How can call your first script with onload page ? is it possible

Rory McCrossan Over a year ago

If you mean that you want to make a change event happen on load, use trigger('change')

Lets-c-codeigniter Over a year ago

Thank you for this trigger('change')

Sarah Groß · Accepted Answer · 2019-10-28 11:34:27Z

3

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

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

edited Oct 28, 2019 at 11:34

answered Oct 28, 2019 at 9:35

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

2 Comments

Lets-c-codeigniter Over a year ago

Is it possible call above function on page load and onchange select tag ? If yes pls help me

Sarah Groß Over a year ago

window.addEventListener('DOMContentLoaded', getSelectedOptions); and document.getElementById('tax_classes').addEventListener('change', getSelectedOptions); - you'll need to do the element selection inside the handler then. I updated the code snippet and added selected attributes for demonstration purposes.

Collectives™ on Stack Overflow

Get custom attribute value from multiple select option using jQuery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related