Question

我目前有一个通过更改许多选择字段的值/选项来填充的数组。例如。如果dom中有两个选择字段，则选择的选项为2＆amp; 3然后数组看起来像这样 - SELECT u.id, u.code FROM web_users u JOIN (SELECT client_code FROM web_users_branches GROUP BY client_code HAVING COUNT(*) = 1 ) c ON u.code = c.client_code;

每个select都有一个数据属性Array [ "2", "3" ]，我想将其绑定到每个选项值。所以我可以得到两个数字的总和，例如

data-ticketprice

HTML -

data attribute = 100
Select option value = 5
Sum = 100 x 5;

当前的jQuery -

<select class="ticket-qty" data-ticketprice="280.88" name="34">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

<select class="ticket-qty" data-ticketprice="390" name="39">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

Answer 1

您需要使用map()填充您构建的数组，其中所选数量乘以每个项目的费用，您可以从data属性中检索该费用。从那里，您可以使用reduce()来汇总数组中的所有值。像这样：

$('select.ticket-qty').on('change', function(e) {
  var arr = $('select.ticket-qty').map(function() {
    var cost = $(this).data('ticketprice');
    var qty = $(this).val();
    return cost * qty;
  }).get();
  
  var total = arr.reduce((a, b) => a + b, 0);
  console.log(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ticket-qty" data-ticketprice="280.88" name="34">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

<select class="ticket-qty" data-ticketprice="390" name="39">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

你应该注意到这一切都可以在一个循环中完成，但我假设你正在构建单个总数的数组，以便在你的UI中的其他地方使用。

Answer 2

那么我理解的是，您想要将所选值与Select上的给定数据属性相乘？

以下是获取所有选定值的数组的示例代码。以及如何计算您发布的价值。

var array = [];
var i =0;
$('select.ticket-qty').on('change', function (e) {
    // Get value of all selects in array.
    $('select.ticket-qty').each(function(){
       array[i] = $(this).val();
       i++;
    });
    //calculate Sum ?
    var data_attribute = $(this).data("ticketprice");
    SelectedOptionValue = = $(this).val();
    Sum = parseFloat(data_attribute)* parseInt(SelectedOptionValue);
});

Answer 3

Vanilla JS

const SELECTS = document.querySelectorAll('select.ticket-qty')

const LOG_SUM = e => {
  const ticketPrice = e.target.getAttribute('data-ticketPrice')
  const multiplier = e.target.value
  const SUM = (+ticketPrice * +multiplier)
  
  console.log(SUM)
}

SELECTS.forEach(select => {
  select.addEventListener('change', e => {
    LOG_SUM(e)
  })
})

的jQuery

$('select.ticket-qty').on('change', e => {
  const ticketPrice = $(e.target).attr('data-ticketPrice')
  const multiplier = e.target.value
  const SUM = (+ticketPrice * +multiplier)
  
  console.log(SUM)
});

注意我如何将+运算符添加到ticketPrice＆amp; multiplier常数......这是因为attr＆amp;＆amp; value正在返回Strings，+运算符会将String类型的数字转换为Number类型的数字

Answer 4

您可以使用一些jQuery插件来填充和缩小选择框。

＆＃13;

(function($) {
  $.reduce = function(arr, fn, initial) {
    initial = typeof initial === 'undefined' ? 0 : initial;
    $.each(arr, function(i, v) {
      initial = fn(initial, v, i);
    });
    return initial;
  };
  $.fn.reduce = function(fn, initial) {
    return $.reduce(this, fn, initial);
  };
  $.fn.populateCombo = function(opts) {
    let data = opts.data || Array.apply(null, {length: opts.range || 0}).map(Number.call, Number);
    return this.append(data.map(x => $('<option>')
      .text(opts.textFn ? opts.textFn(x) : x)
      .val(opts.valFn ? opts.valFn(x) : x)));
  };
})(jQuery);

$('.ticket-qty').each((i, combo) => $(combo).populateCombo({
  range : 6, textFn: v => v + ' Tickets'
}));

$('select.ticket-qty').on('change', function(e) {
  var total = $('select.ticket-qty').reduce(function(result, item) {
    return result + $(item).data('ticketprice') * $(item).val();
  }, 0);
  console.log('$' + total.toFixed(2));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ticket-qty" data-ticketprice="280.88" name="34"></select>
<select class="ticket-qty" data-ticketprice="390" name="39"></select>

＆＃13;

JQuery为每个数组项添加另一个值＆amp;和

4 个答案: