获取某些选择框javascript的总和答案

【问题标题】：Get sum of certain select boxes javascript获取某些选择框javascript的总和
【发布时间】：2016-01-11 22:05:29
【问题描述】：

我在编码方面太落后了，我是一个纯粹的新手，但并不愚蠢。我与 Dreamweaver 一起工作，我喜欢这个程序，我也喜欢它向您显示错误和提示要修复的事实。我正在为一个高尔夫站点创建一个记分卡，您将在其中使用下拉选择框为您打的 18 个洞中的每个洞选择一个得分。举几个例子

<form action="" method="post" id="postscore"> 
<table width="99%" border="0" cellspacing="6" cellpadding="4">
            <tr class="LeaderBoardTopColum">
              <td width="19%">&nbsp;</td>
              <td width="9%">1</td>
              <td width="9%">2</td>
              <td width="9%">3</td>
              <td width="9%">4</td>
              <td width="9%">5</td>
              <td width="9%">6</td>
              <td width="9%">7</td>
              <td width="9%">8</td>
              <td width="9%">9</td>
              <td width="9%">&nbsp;</td>
            </tr>


<tr>
              <td>Front 9</td>
              <td>
              <select name="H1">       
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H2">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td>
                <select name="H3">   
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H4">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H5">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H6">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H7">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H8">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H9">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /></td>
    </tr>

            <tr class="LeaderBoardTopColum">
              <td>&nbsp;</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
              <td>13</td>
              <td>14</td>
              <td>15</td>
              <td>16</td>
              <td>17</td>
              <td>18</td>
              <td>&nbsp;</td>
            </tr>

<tr>
              <td>Back 9</td>
              <td><select name="H10">
        <option value="3" >3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H11">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H12"> 
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H13">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H41">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H15">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H16">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H17">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H18">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /></td>
    </tr>

            <tr>
              <td colspan="11"> </td>
              </tr>
          </table>
<!--assigned event to the form to call OnChangeFinal()--> 


         <input name="TotalPar" type="text" value="0" maxlength="2"/><!--The grand total appears here-->


<input type="submit" name="button" id="button" value="Submit">
</form>

我希望看到的是第 1 行 F9 的总计作为文本，然后第 2 行的 B9 总计作为文本，如果成员更改他的选择以确保字段的总计值是多少？和一个隐藏字段，我将在其中将总和携带到我的 .ASP 插入记录集中。请记住，我在此页面上还有其他选择列表菜单，但我不想将它们添加到我需要的任何总数中。我花了 3-4 天时间查看此站点上的 sn-ps，一些应用程序接近但总是错误地告诉我一些方法。任何人都可以帮忙吗？非常感谢您的宝贵时间

【问题讨论】：

标签： javascript jquery arrays asp-classic

【解决方案1】：

试试这个：

$('select[name^=H]').change(function()
{
  var sum = 0;
  var range = $(this).attr("name").length > 2 ? $(this).attr("name").slice(1,3) : $(this).attr("name").slice(1,2);
  if(range < 9)
  {
     $('select[name^=H]').each(function()
     {
         var range = $(this).attr("name").length > 2 ? $(this).attr("name").slice(1,3) : $(this).attr("name").slice(1,2);
         if(range <= 9)
          sum += parseInt($(this).val());
     });
     $('#total_row_1').val(sum);
  }
  else
  {

     $('select[name^=H]').each(function()
     {
         var range = $(this).attr("name").length > 2 ? $(this).attr("name").slice(1,3) : $(this).attr("name").slice(1,2);
         if(range > 9)
          sum += parseInt($(this).val());
     });

     $('#total_row_2').val(sum);
  }
});

工作示例：https://jsfiddle.net/DinoMyte/6d5ry9br/10/

【讨论】：

【解决方案2】：

使用 JavaScript，您可以添加一个事件，以便当用户更改选择时调用一个函数，您可以让 onChange 事件调用相同的函数，只要总数是从相同的输入添加的：

<select name="H1" onChange="updateTotals();">

.. 首先，将您的 name="H1" 更改为 id="H1"。除非您提交表单，否则请使用 id。

接下来，如果您想在此处更新总数，请将 <td>Front 9</td> 更改为 <td id="frontLabel">Front 9</td>。

在您的<HTML><HEAD> .. 中添加：

<script>
  function updateTotals() {
    //read the values which need to be totaled
    var val1 = parseInt(getSelectedText('H1'));
    .. repeat for all...

    //add them up
    var total = val1 + val2 + ...;

    //update the results on your page
    var totalFieldElement = document.getElementById('frontLabel');
    totalFieldElement.textContent = "Front 9: " + total ; 
  }

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

这里是前面9的完整代码，后面你可以复制粘贴修改，here it is so you can demo it on plunkr还有：

<!DOCTYPE html>
<html>
  <head>
 <script>

     function updateTotals() {

    //read the values which need to be totaled
    var val1 = parseInt(getSelectedText('H1'));
    var val2 = parseInt(getSelectedText('H2'));
    var val3 = parseInt(getSelectedText('H3'));
    var val4 = parseInt(getSelectedText('H4'));
    var val5 = parseInt(getSelectedText('H5'));
    var val6 = parseInt(getSelectedText('H6'));
    var val7 = parseInt(getSelectedText('H7'));
    var val8 = parseInt(getSelectedText('H8'));
    var val9 = parseInt(getSelectedText('H9'));

    //add them up
    var total = val1 + val2 + val3 + val4 + val5 + val6 + val7 + val8 + val9;

    //update the results on your page
    var totalFieldElement = document.getElementById('total_row_1');
    totalFieldElement.value = total ; 

  }

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

 </script>
  </head>

  <body>
<form action="" method="post" id="postscore"> 
<table width="99%" border="0" cellspacing="6" cellpadding="4">
            <tr class="LeaderBoardTopColum">
              <td width="19%">&nbsp;</td>
              <td width="9%">1</td>
              <td width="9%">2</td>
              <td width="9%">3</td>
              <td width="9%">4</td>
              <td width="9%">5</td>
              <td width="9%">6</td>
              <td width="9%">7</td>
              <td width="9%">8</td>
              <td width="9%">9</td>
              <td width="9%">&nbsp;</td>
            </tr>


<tr>
              <td >Front 9</td>
              <td>
              <select onChange="updateTotals();" id="H1">       
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select onChange="updateTotals();" id="H2">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td>
                <select onChange="updateTotals();" id="H3">   
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select onChange="updateTotals();" id="H4">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select onChange="updateTotals();"  id="H5">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select onChange="updateTotals();"  id="H6">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select onChange="updateTotals();"  id="H7">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select onChange="updateTotals();"  id="H8">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select  onChange="updateTotals();" id="H9">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /></td>
    </tr>

            <tr class="LeaderBoardTopColum">
              <td>&nbsp;</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
              <td>13</td>
              <td>14</td>
              <td>15</td>
              <td>16</td>
              <td>17</td>
              <td>18</td>
              <td>&nbsp;</td>
            </tr>

<tr>
              <td>Back 9</td>
              <td><select name="H10">
        <option value="3" >3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H11">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H12"> 
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H13">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H41">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H15">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H16">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H17">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H18">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /></td>
    </tr>

            <tr>
              <td colspan="11"> </td>
              </tr>
          </table>
<!--assigned event to the form to call OnChangeFinal()--> 


         <input name="TotalPar" type="text" value="0" maxlength="2"/><!--The grand total appears here-->


<input type="submit" name="button" id="button" value="Submit">
</form>
<script> updateTotals();</script>
  </body>

</html>

【讨论】：

thril -- 我试了又试了又试了，我就是无法让你的脚本工作，我用很多不同的方法在这里简单的方法，但仍然没有工作
前 9 和前 9
我更新了我的答案，以便您可以看到它的实际效果。如果你想保留 name="" 你可以这样做，在第二个函数中将 getElementById 更改为 getElementsByName() 并改回我修改 name= 到 id=
抱歉，我花了这么长时间才回复代码绝对是完美的梦想作品，我的朋友！我衷心感谢你！

【解决方案3】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('select').change(function () {
            updateTotals();
        });


        function updateTotals()
        {
            var szResult1=0;
            var szResult2=0;
            var szResult3 = 0;
            var szName = ""

            for (i = 1; i <= 9; i++)
                {
                szName = "H" + i;

                value1 = $("select[name=" + szName + "]").val()
                szResult1 = szResult1 + parseInt(value1, 10);

                }

            for (i = 10; i <= 18; i++) {
                szName = "H" + i;
                value1 = $("select[name=" + szName + "]").val()
                szResult2 = szResult2 + parseInt(value1, 10);
            }

            szResult3 = szResult1 + szResult2;

            $('#total_row_1').val(szResult1);
            $('#total_row_2').val(szResult2)
            $('input[name=TotalPar]').val(szResult3)
        }

    });
</script>
</head>
<body>
  <form action="" method="post" id="postscore"> 
<table width="99%" border="0" cellspacing="6" cellpadding="4">
            <tr class="LeaderBoardTopColum">
              <td width="19%">&nbsp;</td>
              <td width="9%">1</td>
              <td width="9%">2</td>
              <td width="9%">3</td>
              <td width="9%">4</td>
              <td width="9%">5</td>
              <td width="9%">6</td>
              <td width="9%">7</td>
              <td width="9%">8</td>
              <td width="9%">9</td>
              <td width="9%">&nbsp;</td>
            </tr>


<tr>
              <td>Front 9</td>
              <td>
              <select name="H1">       
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H2">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td>
                <select name="H3">   
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H4">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H5">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H6">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H7">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H8">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H9">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /></td>
    </tr>

            <tr class="LeaderBoardTopColum">
              <td>&nbsp;</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
              <td>13</td>
              <td>14</td>
              <td>15</td>
              <td>16</td>
              <td>17</td>
              <td>18</td>
              <td>&nbsp;</td>
            </tr>

<tr>
              <td>Back 9</td>
              <td><select name="H10">
        <option value="3" >3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H11">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H12"> 
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H13">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H14">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H15">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H16">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H17">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><select name="H18">        
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
</select></td>
              <td><input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /></td>
    </tr>

            <tr>
              <td colspan="11"> </td>
              </tr>
          </table>
<!--assigned event to the form to call OnChangeFinal()--> 


         <input name="TotalPar" type="text" value="0" maxlength="2"/><!--The grand total appears here-->


<input type="submit" name="button" id="button" value="Submit">
</form>

</body>
</html>

【讨论】：

在您的代码中将“”