JS获取下拉列表的最大值和选定值

时间:2014-02-12 06:09:56

标签: javascript html

我的页面中有一系列下拉列表,其中有一些不同的值,例如有些值,如“NA,1,2,3到100”,其他有“NA,1,2,3到50”等有不同的结束值,但都以“NA”开头

我正在编写代码来查找所选值的总和以及JS中每个值的百分比。

总和我得到了所选值的添加但是我得不到的百分比。 我想获取所选下拉列表的最大值。

JS功能

    function sum() {
      var result = 0;
      var sval = 0;

      for (var f = 1; f<= 5; f++) {
        var sval = document.getElementById('ddlist_'+f).value;
        if(!isNaN(sval)) {
          var sval = parseFloat(sval);
          result = result + sval;

        }
      }


      }
    }

    window.onload = sum;

Total Value of the Selected List is in Var Result. 
I want to find the Maximum value of all list  

示例下拉列表

    <option value=NA> NA </option><option value="0">0</option><option value="1">1</option><option value="2">2</option><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><option value="8">8</option><option value="9">9</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option>
<option value="18">18</option><option value="19">19</option>
<option value="20">20</option><option value="21">21</option><option value="22">22</option>
<option value="23">23</option><option value="24">24</option><option value="25">25</option>

输出

<span id="maxtotal " style="color:#06F; font-weight:bold;"></span>

简而言之,当选择下拉列表时,我想要获取选定值和最后一个,这是下拉列表的最大值。

谢谢你

2 个答案:

答案 0 :(得分:0)

您可以像数组一样访问HTMLSelectElement objectoptions集合。

function sum() {
  var $ = function (str) { return document.getElementById(str); },
      f, ddlist, sval, mval,
      result = 0, maxtotal = 0, percent;

  // try 'ddlist1', 'ddlist2', .. and so on
  f = 1;
  while (ddlist = $('ddlist' + f++)) {
    sval = ddlist.options[ddlist.selectedIndex].value;
    mval = ddlist.options[ddlist.options.length - 1].value;
    if ( !isNaN(sval) && !isNaN(mval) ) {
      result += parseFloat(sval);
      maxtotal += parseFloat(mval);
    }
  }

  percent = (maxtotal > 0) ? result / maxtotal * 100 : 0;

  $('maxtotal').innerHTML = result + ' of ' + maxtotal;
  $('totalper').innerHTML = percent.toFixed(2) + ' %';
}

答案 1 :(得分:0)

我认为这就是你想要完成的事情:http://jsfiddle.net/jK5Uq/

这里没有诀窍,我几乎没有改变你的代码(原始版本),但是html部分:

<select id='ddlist_1' onchange='sum()'>
    <option value=NA> NA </option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id='ddlist_2' onchange='sum()'>
    <option value=NA> NA </option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<select id='ddlist_3' onchange='sum()'>
    <option value=NA> NA </option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
</select>
<select id='ddlist_4' onchange='sum()'>
    <option value=NA> NA </option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>
<p id="maxtotal" />
<p id="totalper" />