I want to get 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 .
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments