计算在“选择”下拉列表中选择每个选项的次数

时间:2013-10-30 14:28:23

标签: javascript jquery forms select

我正在撰写表格,以帮助某人做课堂观察。表格有三个主要目标。

  1. 它需要是所有客户端,所以我使用的是JavaScript。
  2. 需要跟踪我已经完成的观察到的总间隔数。
  3. 还需要计算每个选项的选择频率(例如,选择1次,选择2次,等等)。这就是我被困的地方。我觉得它应该是一个简单的if语句,类似于我以前的代码解决了我的第一个问题,但我没有运气。任何帮助,将不胜感激。
  4. 如果它有所不同,总共有144个间隔。

    以下是我的表单示例和我工作的脚本解决了我的需求#2。

    我的剧本

    $('select[id*="interval"]').change(function() {
         total = 0;
        $('select[id*="interval"]').each(function() {
            total += (+this.value);
        });
        document.getElementById('result').innerHTML = total;
    }); 
    

    我的表格

    脚本结果打印

    <td><label>Total # Of Observation Intervals:</label></td><td><span id="result">0</span></td>
    

    我希望选项总计

    <tr>
    <td><label>1. Lying Down:</label></td><td><span id="resultA">0</span></td><td>%</td>
    <td><label>2. Sitting:</label></td><td><span id="resultB">0</span></td><td>%</td>
    </tr>
    <tr>
    <td><label>3. Standing:</label></td><td><span id="resultC">0</span></td><td>%</td>
    <td><label>4. Walking:</label></td><td><span id="resultD">0</span></td><td>%</td>
    </tr>
    <tr>
    <td><label>5. Very Active:</label></td><td><span id="resultE">0</span></td><td>%</td>
    </tr>
    

    我的几个下拉菜单

    <td><label class=select>Interval 1</label></td><td>Student Activity</td><td><select data-mini=true id="interval1">
    <option value=0></option>
    <option value=1 id="optA">1</option>
    <option value=1 id="optB">2</option>
    <option value=1 id="optC">3</option>
    <option value=1 id="optD">4</option>
    <option value=1 id="optE">5</option>
    <option value=1 id="optF">6</option>
    </select>
    </td>
    
    </td>
    </tr>
    <tr>
    <td><label for=select-choice-4 class=select>Interval 2</label></td><td>Student Activity</td><td><select data-mini=true id="interval2">
    <option value=0></option>
    <option value=1>1</option>
    <option value=1>2</option>
    <option value=1>3</option>
    <option value=1>4</option>
    <option value=1>5</option>
    <option value=1>6</option>
    </select>
    </td>
    

    我试过的东西不起作用

    $('select[id*="interval"]').options[1].value.change(function() {
                totalA = 0;
                $('select[id*="interval"]').options[1].value.each(function()  {
                    totalA += (+this.value);
                });
                document.getElementById('resultA').innerHTML = totalA;
            });
    

1 个答案:

答案 0 :(得分:0)

首先:总变量是否在变更(function(){})范围之外的某处定义?应该是。

其次:你的代码所做的是 - 每当每个选择改变时,它所做的第一件事就是将总数设置为0 - 难怪为什么总数是错误的。

第三:确保你理解$()。each和$()。change do,导致整个程序流程似乎有缺陷

此外:你不应该在同一个选择

中重复多次相似的值

我无法完全理解你的目标是什么,但这里的代码完成了类似的事情:

    var totals = { //totals
            interval1: {
                optionA: 0,
                //...
                optionZ: 0
            },
            interval2: {
                optionA: 0, //total hits for: <select id="interval2"> <option value="optionA">
                optionB: 0,
                optionC: 0
            }
            //etc...
    };

    $('select[id*="interval"]').each(function(){
        $(this).change(function(){ //attach onchange event to each of the selects
            var $s = $(this);
            if(totals[$s.attr('id')]){
                totals[$s.attr('id')][$s.val()] += 1;
                //update the span corresponding to the particular select and the particular option value:
                $('#result_for_' + $s.attr('id') + '_' + $s.val()).text(totals[$s.attr('id')][$s.val()]);
            }
        })
    });

这是一个基于每个选项的唯一值的解决方案(每个选项,它们可以在选项中重复)

此解决方案也不是最佳解决方案 - 每次要更新时,都不应在DOM中搜索$('#result_for_'+ ....)。你应该记住所有的计数器。

祝你好运!