How to get data attribute from option in multiple select?

Question

How can I get list of selected values from multiple select? I can get value only( I need to get attr values ('data-name')

https://playcode.io/301780?tabs=console&index.html&output

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment">
  <option value="3" data-name="blago">blago</option>
  <option value="4" data-name="usd" selected>usd</option>
  <option value="5" data-name="uah" selected>uah</option>
  <option value="2" data-name="btc">btc</option>
</select>

<script>
  $(document).ready(function() {
    var vals = $('#id_payment').val()
    var paymentList = []

    if (vals) {
      for (var i = 0; i < vals.length; i++) {
        console.log(vals[i])
        paymentList.push($(vals[i]).selector)
      }
    }
  })
</script>

Answer 1

You can use map to loop thru the selected options and use data to get the data-name values.

var result = $("#id_payment option:selected").map(function() {
  return $(this).data("name");
}).get();

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment">
  <option value="3" data-name="blago">blago</option>
  <option value="4" data-name="usd" selected>usd</option>
  <option value="5" data-name="uah" selected>uah</option>
  <option value="2" data-name="btc">btc</option>
</select>