Onchange multiple选择如何总结其他输入值中的总和

Question

I have a select option with onchange function that can change the value in other input whenever I click the option.

However it is not working on multiple select which just only show the first select option value only when select many of the option.

HTML select option code

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

  <option data-typeid="1111" value="courseId1">courseName1</option>
  <option data-typeid="2222" value="courseId2">courseName2</option>
</select>

Input to be display the total

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

Function script

<script>
function selectFunction(e) {
  var type_id = $('select option:selected').attr('data-typeid'); //to get value
  document.getElementById("money").value =type_id;
}
</script>

Answer 1

When multiple options are selected then we need to loop through all the selected options and get the data-typeid for each of them using map like:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" onchange="selectFunction(event)" name="pay_course[]" required="" multiple>

  <option data-typeid="1000" value="courseId1">courseName1  </option>
  <option data-typeid="2000" value="courseId2">courseName2  </option>
  <option data-typeid="3000" value="courseId3">courseName3  </option>
  <option data-typeid="4000" value="courseId4">courseName4  </option>
</select>
<br/>
<br/>
<input type="number" value="" id="money" class="form-control">

</div>