javascript - 如何添加多个选择选项

Question

如何在多个选择选项上添加第 1 轮、第 2,3 轮，即下图中选择的第 1 轮 + 第 5 轮，并显示在 id="total" 上，即6？我试过但没有得到这个想法。

HTML 表单

<div class="form row">

<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
    <option value="1">Round 1</option>
    <option value="2">Round 2</option>
    <option value="3">Round 3</option>
    <option value="4">Round 4</option>
    <option value="5">Round 5</option>
    <option value="6">Round 6</option>
    <option value="7">Round 7</option>
    <option value="8">Round 8</option>
    <option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text"> 
</div>

脚本

<script>
   document.querySelector('.form').addEventListener('change', function() {
    const nr = +document.getElementById('no_of_rounds').value || 0;
    var round_1 = 80;
    var round_2 = 90;
    var round_3 = 100;
    var round_4 = 110;
 
    document.getElementById('total').value = total;
  }


}
$('select').selectpicker();
</script>

标签： javascripthtml

Answer 1

我认为这就是您正在寻找的：

document.querySelector('.form').addEventListener('change', function() {
  let selectedValues = $('#no_of_rounds').val();
  
  let sum = 0;
  $("#no_of_rounds option:selected").each(function () {
    let $this = $(this);
    if ($this.length) {
      sum += parseInt($this.val());
    }
  });
  document.getElementById('total').value = sum;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form row">

<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
    <option value="1">Round 1</option>
    <option value="2">Round 2</option>
    <option value="3">Round 3</option>
    <option value="4">Round 4</option>
    <option value="5">Round 5</option>
    <option value="6">Round 6</option>
    <option value="7">Round 7</option>
    <option value="8">Round 8</option>
    <option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text"> 
</div>