堆栈内存溢出
  繁体   English   中英

使用javascript在组合框中总计所有值

[英]Total all value in combo box using javascript

 原文  2014-01-18 09:15:13  4   3    javascript

问题描述

我有一个程序，需要使用javascript来计算在组合框中选择的所有总数到文本框。我的问题是它不工作它不会总..我需要你帮助的人...我还在学习。 

<form method="post" action="index.php" name="frm" id="frm" >
  <input type="text" name="name" id="query" />
  <select name="optA">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
    |
  <select name="optB">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
    |
  <select name="optC">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
    |
  <select name="optD">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
  <input type="text" name="total" id="total" onKeyUp="optTotal()" />
  <input type="submit" value="Test" name="calculate" id="press" />
</form>

这是我的javascript代码： 

<script>
function optTotal()
{
var a1 = document.querySelector('input[name="optA"]:selected');
var b1 = document.querySelector('input[name="optB"]:selected');
var c1 = document.querySelector('input[name="optC"]:selected');
var d1 = document.querySelector('input[name="optD"]:selected');
if (a1 != null)
    a1 = parseFloat(a1.value);
else
    a1 = 0;
if (b1 != null)
    b1 = parseFloat(b1.value);
else
    b1 = 0;
if (c1 != null)
    c1 = parseFloat(c1.value);
else
    c1 = 0;
if (d1 != null)
    d1 = parseFloat(d1.value);
else
    d1 = 0;

document.frm.total.value=parseFloat(a1)+parseFloat(b1)+parseFloat(c1)+parseFloat(d1);
}
</script>

我的代码问题是什么？任何人？

3 个解决方案

解决方案1
 1  2014-01-18 09:23:05

你可以使用这样的东西： 

var formSelects = document.querySelectorAll('#frm select');
var Sum = 0;
for (var i = 0; i < formSelects.length; i++) {
    if(formSelects[i].value != '') Sum += parseFloat(formSelects[i].value);
}

我的建议是你删除所有内联脚本并使用如下： 

window.onload = function () {
    function optTotal() {
        var Sum = 0;
        for (var i = 0; i < formSelects.length; i++) {
            if (formSelects[i].value != '') Sum += parseFloat(formSelects[i].value);
        }
        alert(Sum);
    }

    var formSelects = document.querySelectorAll('#frm select');
    for (var i = 0; i < formSelects.length; i++) {
        formSelects[i].onchange = optTotal;
    }

};

演示

解决方案2
 1 已采纳  2014-01-18 09:31:15

你应该使用正确的值检查这是一个工作代码。 这是一个演示http://jsbin.com/uriFida/2/edit 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form method="post" action="index.php" name="frm" id="frm" >
  <input type="text" name="name" id="query" />
  <select name="optA" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
    |
  <select name="optB" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
    |
  <select name="optC" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
    |
  <select name="optD" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
  <input type="text" name="total" id="total" onKeyUp="optTotal()" />
  <input type="submit" value="Test" name="calculate" id="press" />
</form>
</body>
</html>

使用Javascript 

function optTotal()
{
    var a1 = document.querySelector('select[name="optA"]');
    var b1 = document.querySelector('select[name="optB"]');
    var c1 = document.querySelector('select[name="optC"]');
    var d1 = document.querySelector('select[name="optD"]');

    if (a1.value && a1.value != "")
        a1 = parseFloat(a1.value);
    else
        a1 = 0;

    if (b1.value && b1.value != "")
        b1 = parseFloat(b1.value);
    else
        b1 = 0;

    if (c1.value && c1.value != "")
        c1 = parseFloat(c1.value);
    else
        c1 = 0;

    if (d1.value && d1.value != "")
        d1 = parseFloat(d1.value);
    else
        d1 = 0;

      document.getElementById("total").value = parseFloat(a1)+parseFloat(b1)+parseFloat(c1)+parseFloat(d1);

}

解决方案3
 0  2014-01-18 09:26:35

尝试这样的事情

HTML 

<form method="post" action="index.php" name="frm" id="frm" >
  <input type="text" name="name" id="query" />
  <select name="optA" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
    |
  <select name="optB" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
    |
  <select name="optC" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
    |
  <select name="optD" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
  <input type="text" name="total" id="total" onKeyUp="optTotal()" />
  <input type="submit" value="Test" name="calculate" id="press" />
</form>

JAVASCRIPT 

function optTotal()
{
    var a1 = document.getElementsByName('optA')[0].value;
    var b1 = document.getElementsByName('optB')[0].value;
    var c1 = document.getElementsByName('optC')[0].value;
    var d1 = document.getElementsByName('optD')[0].value;
    var total = 0;
    console.log(a1)
    if (a1 != '')
        total += parseFloat(a1);
    if (b1 != '')
        total += parseFloat(b1);
    if (c1 != '')
        total += parseFloat(c1);
    if (d1 != '')
        total += parseFloat(d1);

    document.frm.total.value=total;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Java脚本更改其他组合框的组合框的值 使用JavaScript设置组合框值不起作用 在JavaScript中调用组合框值 如何使用JavaScript提交不带表单的组合框值？ PHP：使用JavaScript时未插入组合框值 如何在JavaScript中设置网格组合框值？ 从 javascript 组合框中输入值 获取JavaScript中组合框的选定索引的值 使用jquery将一行中所有文本框值的总和 使用JavaScript聚焦第一个组合框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM