jQuery:求和多个选择值

时间:2018-08-11 03:20:09

标签: jquery html5

如何对“ |”后的值求和myselect的标签

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

 <select multiple class="form-control" id="multipleSelect" name="myselect[]">
<option value="X12SO|10">X12SO</option>
<option value="X13SO|20">X13SO</option>
<option value="X14SO|30">X14SO</option>
<option value="X15SO|40">X15SO</option>
<option value="X16SO|50">X16SO</option>

并通过简单的jquery代码获取myresult的实时结果

<input type="text" name="myresult">

使用简单的jQuery代码

let sum = 0;
    $("#multipleSelect :selected").each(function(){
      sum += +this.value.split("|")[1];
    });
    $("input[name='myresult']").val(sum);

1 个答案:

答案 0 :(得分:2)

您可以迭代所有选项并获得累积值。将此总和设置为input的值。

let sum = 0;
$("select[name='myselect'] option").each(function(){
  sum += +this.value.split("|")[1];
});
$("input[name='myresult']").val(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple class="form-control" name="myselect">
  <option value="X12SO|10">X12SO</option>
  <option value="X13SO|20">X12SO</option>
  <option value="X14SO|30">X12SO</option>
  <option value="X15SO|40">X12SO</option>
  <option value="X16SO|50">X12SO</option>
</select>

<input type="text" name="myresult">