Javascript检测要汇总的多个选择选项的总数

Question

我有一个 onchange 多重选择选项，可以选择多个类(class)，然后以其他输入值显示总价

但是，如果我有另一个多重选择选项要在该输入中汇总几个月，如何获取总价

每个月的价格相同

类(class)选择选项代码

<select class="form-control" onchange="selectFunction(event)" 
name="pay_course[]" required="" multiple>

<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>

月份选择选项代码

<select class="form-control" multiple="multiple"  >
        <option selected="selected" value="" name="pay_fee_month[]" disabled="true">Select Month...</option>
        <option value='Janaury'>Janaury</option>
        <option value='February'>February</option>
        <option value='March'>March</option>
        <option value='April'>April</option>
        <option value='May'>May</option>
        <option value='June'>June</option>
        <option value='July'>July</option>
        <option value='August'>August</option>
        <option value='September'>September</option>
        <option value='October'>October</option>
        <option value='November'>November</option>
        <option value='December'>December</option>
    </select>

输入要显示的总数

 <input type="number" value="" id="money" class="form-control">

脚本

 function selectFunction(e) {
 var type_id = $('select option:selected').map(function() {
      return $(this).attr('data-price');
  })
 .get().map(parseFloat).reduce(function(a, b) {
      return a + b
  });
 console.log(type_id)
 $("#money").val( type_id );
}

Answer 1

我会用另一种方式......完全。

您希望得到的是基于所选类(class)的总价格乘以所选月份的金额。

下面是一个执行此操作的脚本...在两个选择的更改上。

$("#courses, #months").on("change", function(){
  
  // Get the total price of the selected courses.
  var price = 0;
  $("#courses").find("option:selected").each(function(){
    price += $(this).data("price");
  });
  console.log(price);
  
  // Get the amount of selected months.
  var monthCount = $("#months").find("option:selected").length;
  console.log(monthCount);
  
  // Multiply.
  var total = monthCount * price;
  $("#money").val(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="courses" name="pay_course[]" required="" multiple>

  <option data-price="1111" value="courseId1">English</option>
  <option data-price="2222" value="courseId2">Math</option>
</select>

<select class="form-control" id="months" multiple="multiple"  >
  <option value="" name="pay_fee_month[]" disabled>Select Month...</option>
  <option value='January'>January</option>
  <option value='February'>February</option>
  <option value='March'>March</option>
  <option value='April'>April</option>
  <option value='May'>May</option>
  <option value='June'>June</option>
  <option value='July'>July</option>
  <option value='August'>August</option>
  <option value='September'>September</option>
  <option value='October'>October</option>
  <option value='November'>November</option>
  <option value='December'>December</option>
</select>

 <input type="number" value="" id="money" class="form-control">

请注意，我删除了内联 onchange 处理程序并使用了 jQuery .on()

我还删除了第一个月选项中的 selected="selected"，因为它也已被禁用。