Получить значение пользовательского атрибута из нескольких вариантов выбора, используя Jquery - PullRequest
Новая
       30

Получить значение пользовательского атрибута из нескольких вариантов выбора, используя Jquery

2 голосов
/ 28 октября 2019

Я хочу получить значение пользовательского атрибута из множественного выбора, вот мой 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 .

Ответы [ 2 ]

3 голосов
/ 28 октября 2019

Самый простой способ создать массив атрибутов 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>
2 голосов
/ 28 октября 2019

Вы говорите, что хотите получить значение атрибута, но вместо этого вы регистрируете .value, что относится к атрибуту value. Вам нужно использовать getAttribute('data-percentage') вместо. 

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