javascript - jQuery : Sum multiple select value if only selected

标签 javascript jquery html

如果仅选择该项目,如何对所选多个项目的值求和。从示例中我想获取“X12SO+X13SO=30”的值

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" 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>
</select>

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

最佳答案

使用onchange来检测所选选项是否发生更改。

let sum = 0;
$("#multipleSelect").on("change", function(){
  sum = 0;
  // if there are no options being selected, it would be an empty array[]
  // and sum each splited value
  ($(this).val() || []).map(v=>sum += +v.split("|")[1])
  $("input").val(sum);
})
<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>
</select>

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

关于javascript - jQuery : Sum multiple select value if only selected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51832479/

相关文章:

javascript - 如何从 JQuery 对象获取 javascript 控件?

javascript - JQuery - 使用给定的正则表达式搜索元素值

jquery - 使用 jQuery 在 IE7 中修改 STYLE block

javascript - 关联变量及其 ID 的最佳方式

javascript - Uncaught ReferenceError : checkAvailability is not defined

javascript - Wordpress ajax 与 async false

php - 如何使用 Ajax 或 Jquery 填充文本框中的值?

javascript - 我需要一个自定义确认框以 html 形式实现 Onsubmit()。我该如何实现它?

javascript - fullCalendar - 禁用多选日

css - <div> 在添加内容时自动添加间隙/填充/边距