javascript - 添加 sum 并将其替换为 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 张“节日套票”门票(50 欧元，-) 3 张“周六”门票(30 欧元，-) 总和:190，-

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

Answer 1

首先，使用 change() 函数捕获每个select-box 上的 change 事件。其次，使用each()函数迭代每个选择框，如果它发生变化，则将每个选择框的值与价格相乘> 并添加到 $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,-" />