jquery 获取循环选择的输入值，并在其变化时对其中的值求和

rkkpypqq 于 2022-12-22 发布在 jQuery

关注(0)|答案(3)|浏览(107)

我有一个简单的表单，它循环一些来自服务器的选择元素。在这种情况下，我想对每个选择的选项值求和，而不是禁用的选项值，并在每次用户更改输入值时显示这些值的计算结果。它是如何与onchage事件一起工作的。提前感谢。

HTML代码示例

<form>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>

  <input type="number" value="0" required>
  <button type="submit">Submit</button>
</form>

jquery

来源：https://stackoverflow.com/questions/68357586/get-the-looping-selected-input-value-and-sum-the-value-inside-when-it-change

3条答案

按热度按时间

tf7tbtn21#

过滤、Map和减少

$(function() {
  const sumSels = () => $("#total").val($sels
    .filter(":enabled") // this is not strictly needed in your case
    .map(function() { return +this.value })
    .get()
    .reduce((a, b) => a + b)
    .toFixed(2));

  const $sels = $('[name="presence-value"]');
  $sels.on("change", sumSels); // event handler
  sumSels(); // initialise on load
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>

  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>

  <input type="number" value="0" readonly id="total">
  <button type="submit">Submit</button>
</form>

具有动态添加或删除选择的版本
一个二个一个一个

赞(0）回复(0）举报 2022-12-22

pkbketx92#

您可以只侦听来自任何选择的更改事件，然后将它们的值相加

$(document).ready(function() {
  $('select').change(function() {
    let total = 0;
    $('select').each(function() {
      total += +$(this).val()
    })
    console.log('the total is', total)
    $('[name=total]').val(total)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="1 presence-value form-control" name="presence-value" required>
      <option value="">-- Select--</option>
      <option value="1" selected>Full</option>
      <option value="0.5">Half</option>
      <option value="0">None</option>
    </select>
  </div>

  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>
  <div class="form-group">
    <select class="2 presence-value form-control" name="presence-value" disabled required>
      <option value="">-- Select--</option>
      <option value="1">Full</option>
      <option value="0.5">Half</option>
      <option value="0" selected>None</option>
    </select>
  </div>

  <input name='total' type="number" value="0" required>
  <button type="submit">Submit</button>
</form>

赞(0）回复(0）举报 2022-12-22

3pvhb19x3#

您需要使用document.querySelectorAll('select')获取所有选择标签，然后使用selectedOptions获取每个选择标签的选择值，并计算它们的总和。
以上所有操作都在一个方法（比如getSum）中，您可以将其与每个select标记的onchange="getSum()"绑定。
注意这个解决方案是基于纯javascript代码的，我没有使用任何js库。

function getSum() {
            var selectes = document.querySelectorAll('select');
            sum = 0;
            for (var i = 0; i < selectes.length; i++) {
                sum += +selectes[i].value;
            }
            document.getElementById("submited").value = sum;
        }

<form>
        <div class="form-group">
            <select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1" selected>Full</option>
                <option value="0.5">Half</option>
                <option value="0">None</option>
            </select>
        </div>
        <div class="form-group">
            <select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1" selected>Full</option>
                <option value="0.5">Half</option>
                <option value="0">None</option>
            </select>
        </div>

        <div class="form-group">
            <select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1">Full</option>
                <option value="0.5">Half</option>
                <option value="0" selected>None</option>
            </select>
        </div>
        <div class="form-group">
            <select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
                <option value="">-- Select--</option>
                <option value="1">Full</option>
                <option value="0.5">Half</option>
                <option value="0" selected>None</option>
            </select>
        </div>

        <input id="submited" type="number" value="0" required>
        <button type="submit">Submit</button>

赞(0）回复(0）举报 2022-12-22

我来回答

jquery 获取循环选择的输入值，并在其变化时对其中的值求和

3条答案

相关问题

热门标签

最新问答