jquery - Jquery：複数の選択要素の値を計算する

Question

htmlのtable（mygrid）のコード：

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="mygrid" 
                                                        rules="all">
        <tbody>
        <tr>
            <th scope="col">Nr de ord</th>
            <th scope="col" class="hideGridColumn">&nbsp;</th>
            <th scope="col" class="hideGridColumn">StudentId</th>
            <th scope="col">Numele Prenuele</th>
            <th scope="col">
                           <span id="mondayText">Luni<br></span>
            </th>
            <th scope="col">
                           <span id="thuesdayText">Marti<br></span>
                           <span id="thuesday">04.09.2012</span>
            </th>
            <th scope="col">
                           <span id="wednesdayText">Miercuri<br></span>
                           <span id="wednesday">05.09.2012</span>
            </th>
            <th scope="col">
                           <span id="thursdayText">Joi<br></span>
                           <span id="thursday">06.09.2012</span>
            </th>
            <th scope="col">
                           <span id="fridayText">Vineri<br></span>
                           <span id="friday">07.09.2012</span>
            </th>
            <th scope="col">
                           <span id="saturdayText">Simbata<br></span>
                           <span id="saturday">08.09.2012</span>
            </th>
            <th scope="col">
                           <span id="absM">Absente motivate</span>
            </th>
            <th scope="col">
                          <span id="absN">Absente nemotivate</span>
            </th>
        </tr>
        <tr>
            <td>1</td>
            <td class="hideGridColumn">9201001121311</td>
            <td class="hideGridColumn">120001</td>
            <td>asd asd asd</td>
            <td><select class="ddlJ" id="a1_0" 
                          name="ctl00$contentbody$mygrid$ctl02$a1">
                <option value="a">a</option>
                <option value="m" selected="selected">m</option>
                <option value="n">n</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <span id="totalM">1</span>
            </td>
            <td>
                <span id="totalN">0</span>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td class="hideGridColumn">9201001121311</td>
            <td class="hideGridColumn">120002</td>
            <td>test1  </td>
            <td><select class="ddlJ" id="a1_1" 
                          name="ctl00$contentbody$mygrid$ctl03$a1">
                <option value="a">a</option>
                <option value="m">m</option>
                <option value="n" selected="selected">n</option>
                </select>
            </td>
            <td></td>
            <td><select class="ddlJ" id="a111_1" 
                            name="ctl00$contentbody$mygrid$ctl03$a111">
                <option value="a">a</option>
                <option value="m" selected="selected">m</option>
                <option value="n">n</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><span id="totalM">1</span>
            </td>
            <td><span id="totalN">0</span>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td class="hideGridColumn">9201001121311</td>
            <td class="hideGridColumn">120003</td>
            <td>test3  </td>
            <td><select class="ddlJ" id="a1_2" 
                            name="ctl00$contentbody$mygrid$ctl04$a1">
                <option value="a">a</option>
                <option value="m" selected="selected">m</option>
                <option value="n">n</option>
                </select>
            </td>
            <td></td>
            <td><select class="ddlJ" id="a111_2" 
                          name="ctl00$contentbody$mygrid$ctl04$a111">
                <option value="a">a</option>
                <option value="m">m</option>
                <option value="n" selected="selected">n</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><span id="totalM">0</span>
            </td>
            <td><span id="totalN">1</span>
            </td>
        </tr>
    </tbody></table>

このテーブル（グリッド）がロードされると、selectedIndex=1またはslectedIndex=2の数を計算する関数があります。

var collection = $('select.ddlJ');
console.log(collection);
            $.each(collection, function(key,value)

            {
                    console.log("key:"+key+"si value"+value);

                     var p = $(value).parent().parent();
                     p.find('td:last').prev().find('span').html(
                     p.find($(value)).filter(function () {
                     return $.trim($(value).get(0).selectedIndex) == 1;
                     }).length
                    );

                       p.find('td:last span').html(
                       p.find($(value)).filter(function () {
                       return $.trim($(value).get(0).selectedIndex) == 2;
                       }).length
                     );

      });      

それは機能しますが、間違って計算されます。行に複数のselect要素がある場合、結果は、次の図のように、最後のselect要素からの数値になります。

Answer 1

行内のすべての選択要素を合計したいと思います。コンボボックスの代わりに行をループして、少し違った方法で問題を見てください。

$（ "tr"）。each（function（i、tr）{
  $（ "。totalM"、tr）.text（$（ "select.ddlJ"、tr）.filter（function（）{return this.value == "m";}）。length）;
  $（ "。totalN"、tr）.text（$（ "select.ddlJ"、tr）.filter（function（）{return this.value == "n";}）。length）;
}）;

ちなみに、クラスに変更する必要がtotalMあります（IDはHTMLページで一意であるため）。totalN

Answer 2

または、これをテストできます。

var row = $('tr').not(':first');

$.each(row, function(key,value){
      var ind = '';
      $(value).find('select option:selected').each(function(){
          ind += $(this).index() + ' for ' + $(this).text() + ' ';
      });
    console.log('The index selected for current row are: ' +ind);
});    

---

編集：

スパンtotalMとtotalNテキストを変更するには、 id="totalM"and id="totalN"to class="totalM"and class="totalN"（idは一意です;-)）を変更します。

そしてこれは方法です：

var row = $('tr').not(':first');

$.each(row, function(key,value){
       var m = 0;
       var n = 0;
       $(value).find('select option:selected').each(function(){
           if($(this).index() == 1) {
              m += 1;
           }else if($(this).index() == 2){
              n += 1;
           }              
       });
       $(value).find('.totalM').text(m);
       $(value).find('.totalN').text(n);
});

ただし、上記のインデックスを配列に格納し、それを使用して合計を入力することも、テキストを格納してmまたはnの数を確認することもできます。

FIDDLEの例