添加并用 3 个选择替换总和

Question

我想构建一个带有 3 个选项的小型票证计算器，这些选项在选择下拉菜单时实时加起来为一个总和。

$(document).ready(function() {

$package = 0;
    $('#package-selection select').each(function(e) {
        $(this).on('change', function(e) {
            //console.log( this.value );
            //console.log( $(this).find(":selected").text() );

            $package = this.value * parseInt($(this).find(":selected").text());
            console.log($package);
            updateCount();
        });
    });


    $sum = 0;
    function updateCount() {
        $sum = $package;
        $('#sum').attr("value", "€ " + $sum +",-");
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="package-selection">
    <h3>Choose Package</h3>

    <label for="tickets-Festivalpackage">Festivalpackage € 50,-</label>
    <select class="form-control" name="tickets-Festivalpackage">
        <option value="50">0</option>
        <option value="50">1</option>
        <option value="50">2</option>
        <option value="50">3</option>
        <option value="50">4</option>
        <option value="50">5</option>
    </select><br>
    <label for="tickets-Friday">Friday € 30,-</label>
    <select class="form-control" name="tickets-Friday">
        <option value="30">0</option>
        <option value="30">1</option>
        <option value="30">2</option>
        <option value="30">3</option>
        <option value="30">4</option>
        <option value="30">5</option>
    </select><br>
    <label for="tickets-Saturday">Saturday € 30,-</label>
    <select class="form-control" name="tickets-Saturday">
        <option value="30">0</option>
        <option value="30">1</option>
        <option value="30">2</option>
        <option value="30">3</option>
        <option value="30">4</option>
        <option value="30">5</option>
    </select>
</div>
<br>
<br>
 <input style="background: none; border: none; outline: none;" type="text" readonly="readonly" id="sum" name="sum" value="€ 0,-"/>

我不知道将值相加为一个总和的最佳方法是什么。

例如示例计算可以是： 2 张门票 "Festivalpackage"（50 欧元，-） 3 张门票 "Saturday"（30 欧元，-）总和：190，-

作为旁注：下拉菜单是从后端动态构建的，并以这种方式出现。

Answer 1

.each() 循环需要在 change 处理程序内部，而不是围绕它。当您更改任何下拉菜单时，您想要遍历所有这些并将它们的值添加到包总计中。

顺便说一句，Javascript 不是 PHP，您不需要以 $.

开头的变量名

$(document).ready(function() {

  $('#package-selection select').on('change', function(e) {
    var $package = 0;
    $("#package-selection select").each(function() {
      $package += this.value * parseInt($(this).find(":selected").text());
    });
    updateCount($package);
  });

  function updateCount($sum) {
    $('#sum').attr("value", "€ " + $sum + ",-");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="package-selection">
  <h3>Choose Package</h3>

  <label for="tickets-Festivalpackage">Festivalpackage € 50,-</label>
  <select class="form-control" name="tickets-Festivalpackage">
        <option value="50">0</option>
        <option value="50">1</option>
        <option value="50">2</option>
        <option value="50">3</option>
        <option value="50">4</option>
        <option value="50">5</option>
    </select><br>
  <label for="tickets-Friday">Friday € 30,-</label>
  <select class="form-control" name="tickets-Friday">
        <option value="30">0</option>
        <option value="30">1</option>
        <option value="30">2</option>
        <option value="30">3</option>
        <option value="30">4</option>
        <option value="30">5</option>
    </select><br>
  <label for="tickets-Saturday">Saturday € 30,-</label>
  <select class="form-control" name="tickets-Saturday">
        <option value="30">0</option>
        <option value="30">1</option>
        <option value="30">2</option>
        <option value="30">3</option>
        <option value="30">4</option>
        <option value="30">5</option>
    </select>
</div>
<br>
<br>
<input style="background: none; border: none; outline: none;" type="text" readonly="readonly" id="sum" name="sum" value="€ 0,-" />

Answer 2

无需向每个 select 标记添加事件侦听器，您可以在对任何选择应用更改时循环遍历所选选项。

像这样：

$(document).ready(function() {
  // Target any <select> tag in given container.
  $('#package-selection select').on('change', function() {
    // Define a starting total of 0
    var total = 0;

    // Loop through all selected options
    $('#package-selection select option:selected').map(function() {
      var quantity = parseInt($(this).text(), 10) || 0;
      var price = this.value;

      // Add calculated price to our total
      total += this.value * quantity;
    });

    // Change the price's value
    $('#sum').attr('value', "€ " + total +",-");
  }); 
});

我想这可以进一步优化，但作为一个起点应该足够了。 Running fiddle 如果需要。

Answer 3

首先，使用 change() 函数在每个 select-box 上捕获 change 事件。其次，使用 each() 函数遍历每个 select-box，如果它发生变化，则将每个 select-box 的值和价格相乘，然后添加到 $package 变量中。最后 - 通过调用 updateCount 函数更新整个价格。

$(document).ready(function() {
  $('.form-control').change(function() {
    $package = 0;
    $('.form-control').each(function() {
      $package += $(this).find(":selected").text() * $(this).find(":selected").val();
    });
    updateCount();
  });

  function updateCount() {
    $sum = $package;
    $('#sum').attr("value", "€ " + $sum + ",-");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="package-selection">
  <h3>Choose Package</h3>

  <label for="tickets-Festivalpackage">Festivalpackage € 50,-</label>
  <select class="form-control" name="tickets-Festivalpackage" id='package'>
        <option value="50">0</option>
        <option value="50">1</option>
        <option value="50">2</option>
        <option value="50">3</option>
        <option value="50">4</option>
        <option value="50">5</option>
    </select><br>
  <label for="tickets-Friday">Friday € 30,-</label>
  <select class="form-control" name="tickets-Friday" id='friday'>
        <option value="30">0</option>
        <option value="30">1</option>
        <option value="30">2</option>
        <option value="30">3</option>
        <option value="30">4</option>
        <option value="30">5</option>
    </select><br>
  <label for="tickets-Saturday">Saturday € 30,-</label>
  <select class="form-control" name="tickets-Saturday" id='saturday'>
        <option value="30">0</option>
        <option value="30">1</option>
        <option value="30">2</option>
        <option value="30">3</option>
        <option value="30">4</option>
        <option value="30">5</option>
    </select>
</div>
<br>
<br>
<input style="background: none; border: none; outline: none;" type="text" readonly="readonly" id="sum" name="sum" value="€ 0,-" />

添加并用 3 个选择替换总和

Add and replace sum with 3 selects

javascript

jquery

calculator