堆栈内存溢出
  简体   繁体   English

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

[英]Total all value in combo box using javascript

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

问题描述

I have a program that needs to compute all the total selected in combo box to text box using javascript..my problem is its not working it wont total..i need your help guys..im still learning. 我有一个程序，需要使用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>

here is my javascript code: 这是我的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>

whats the problem with my code??anyone guys? 我的代码问题是什么？任何人？

3 个解决方案

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

You could use something like this: 你可以使用这样的东西： 

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);
}

My suggestion is you remove all inline script and use like: 我的建议是你删除所有内联脚本并使用如下： 

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;
    }

};

Demo 演示

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

You should use a proper checking of values here is a working code. 你应该使用正确的值检查这是一个工作代码。 Here is a demo http://jsbin.com/uriFida/2/edit 这是一个演示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 使用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

try something like this 尝试这样的事情

HTML 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 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脚本更改其他组合框的组合框的值 - Change the value of combo box of other combo box using Javascript 使用JavaScript设置组合框值不起作用 - setting a combo box value using javascript not working 在JavaScript中调用组合框值 - Call combo box value in JavaScript 如何使用JavaScript提交不带表单的组合框值？ - how to submit combo box value with out form using javascript? PHP：使用JavaScript时未插入组合框值 - php: combo box value not inserting while using javascript 如何在JavaScript中设置网格组合框值？ - How to set grid combo box value in javascript? 从 javascript 组合框中输入值 - Put value from javascript combo box 获取JavaScript中组合框的选定索引的值 - get value of selected index of combo box in javascript 使用jquery将一行中所有文本框值的总和 - Sum total of all text box value in a row using jquery 使用JavaScript聚焦第一个组合框 - Focusing first combo box using JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM