Как получать значение дата атрибутов из выбранных селектов и подставлять их в нужное место?

Question

[Максим Варава]

У меня есть 4 селекта в которых пользователь может выбрать несколько пунктов, в каждом из которых находятся дата атрибуты со своими значениями: data-name, data-price.

Мне необходимо собирать значения атрибутов выбранных пунктов (Название записывать в строку через запятую, а цену суммировать и выводить в пустое значение value). Для 1 селекта на странице это сделать получилось, но когда их больше не хватает опыта в написании скрипта.

Буду очень благодарен за помощь, при необходимости готов заплатить.

Для Селектов использую плагин Chosen с параметром multiple что бы пользователь мог выбрать несколько пунктов в селекте.

https://codepen.io/anon/pen/MBXKrX

Answer 1

[0xD34F]

Обходите все option:selected, суммируя data-price и закидывая data-name в массив:

$('.select-spa').on('change', function() {
  const data = $('option:selected').get().reduce((acc, n) => {
    acc.names.push(n.dataset.name);
    acc.price += +n.dataset.price;
    return acc;
  }, { names: [], price: 0 });

  $('.chose').text(data.names.join(', '));
  $('.to-pay .result-select').val(data.price);
});