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

Question

I am working on a form to help someone do classroom observations. The form has three main goals.

1. It needs to be all client side so I am using JavaScript.
2. It needs to keep track of the total number of intervals observed which I have accomplished.
3. It also needs to calculate how often each individual option is selected (Ex. How many times 1 is selected, how many times 2 is selected, etc.) This is where I am stuck. I feel like it should be a simple if statement and similar to my previous code that solved my first problem but I am having no luck. Any help would be appreciated.

In case it makes a difference there a total of 144 intervals.

Here is a sample of my form and the script that I have working that solved my need #2.

My script

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

Bits of my form

Where the script results print

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

Where I want the options to be totaled

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

A couple of my dropdowns

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

Something I tried that did not work

$('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;
        });

Answer 1

Firstly: Is the total variable defined somewhere outside the change(function(){}) scope? It should be.

Secondly: what your code does is - whenever each select changes, the first thing that it does is setting the total to 0 - no wonder why the total is wrong.

Thirdly: make sure you understand what $().each and $().change do, cause the whole program flow seems to be flawed

Moreover: you shouldn't have a similar value repeated several times in the same select

I can't understand what's your goal exactly, but this code here accomplishes something similar:

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

This is a solution that bases on unique value of each option (per select, they can repeat across selects)

This solution is also not optimal - you shouldn't search the DOM for $('#result_for_' + ....) everytime you want to update it. You should remember all the counters instead.

Good luck!