9

我有选择元素的集合，当我第一次更改一个选择元素的值时，此功能不起作用，它在我第二次更改值时起作用，并且在控制台中我有这

jQuery代码：

$(document).ready(function () {
    var collection = $('select.ddlJ');
    console.log(collection);
    for (var element in collection) {
        $(element).change(function () {

            $('select.ddlJ').change(function (e) {
                $(this).parent().parent().find('td:last').prev().find('span').html(
                    $(this).parent().parent().find('select.ddlJ').filter(function () {
                        return $.trim($(this).val()) == 'm';
                    }).length);

                $(this).parent().parent().find('td:last span').html(
                $(this).parent().parent().find('select.ddlJ').filter(function () {
                    return $.trim($(this).val()) == 'n'; }).length);
            });
        });
    }
});

HTML 代码：

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="grid1"
   rules="all">
        <tbody><tr>
 <th scope="col">Nr de ord</th>
 <th scope="col">StudentId</th>
 <th scope="col">Name LName</th>

 <th scope="col">
      <span id="mondayText">monday<br></span>
      <span id="monday">14.05.2012</span>
  </th>
<th scope="col">
     <span id="thuesdayText">thuesday<br></span>
     <span id="thuesday">15.05.2012</span>
</th>
<th scope="col">
     <span id="wednesdayText">wednesday<br></span>
     <span id="wednesday">16.05.2012</span>
</th>
<th scope="col">
     <span id="thursdayText">thursday<br></span>
     <span id="thursday">17.05.2012</span>
</th>
<th scope="col">
     <span id="fridayText">friday<br></span>
     <span id="friday">18.05.2012</span>
</th>
<th scope="col">
     <span id="saturdayText">saturday<br></span>
     <span id="saturday">19.05.2012</span>
  </th>
   <th scope="col">
   <span id="M">Total1</span>
   </th>
  <th scope="col">
   <span id="N">Total2</span>
   </th>
               </tr><tr>
                <td>  1  </td>
                <td>110001</td>
                <td>Test1 Test1</td><td>
                </td><td>
                </td><td>
                </td><td>
 <select class="ddlJ" id="a1111_0" name="ctl00$contentbody$grid1$ctl02$a1111">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>
 <select class="ddlJ" id="a2222_0" name="ctl00$contentbody$grid1$ctl02$a2222">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>

                          </td><td>
                          </td><td>
                          </td><td>
                          <span class="label" id="totalM"></span>
                          </td><td>
                           <span id="totalN"></span>
                          </td>
        </tr><tr>
        <td> 2   </td>
                <td>110002</td>
                <td>Test2 Test2</td>
                <td></td>
               <td></td>
               <td></td><td>
 <select class="ddlJ" id="a1111_1" name="ctl00$contentbody$grid1$ctl03$a1111">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>

                </td><td>
                </td><td>
                </td><td>
                <span class="label" id="totalM"></span>
                 </td><td>
                 <span id="totalN"></span>
                  </td>
        </tr><tr>
            <td>
                         3                  
                </td><td>110008</td><td>Test3 Test3</td><td>
                </td><td>
                </td><td>
                </td><td>
<select class="ddlJ" id="a1111_2" name="ctl00$contentbody$grid1$ctl04$a1111">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>
                         </td><td>
                </td><td>
                </td><td>
                 <span class="label" id="totalM"></span>
                </td><td>
                  <span id="totalN"></span>
                          </td>
        </tr>
    </tbody>
</table>
4

3 回答 3

13

这是 jQuery 中的一个错误：http: //bugs.jquery.com/ticket/11397

（见：https ://stackoverflow.com/a/9460682/1178235 ）

于 2013-03-07T10:59:38.997 回答
1

尝试改变

var collection = $('select.ddlJ')

使用jQuery.get()

var collection = $('select.ddlJ').get();    
// BTW, this is similar to $('select.ddlJ')[0]

这为您提供了实际的 DOM 元素，而不是匹配它们的 jQuery 对象。或者（以及我可能会这样做的方式），将改为改变

for (var element in collection)

使用jQuery.each()

$('select.ddlJ').each(function(i, element) { ... });
于 2012-09-10T13:20:44.087 回答
1

尝试将 .val() 更改为 .attr('value')

于 2012-09-27T02:50:25.563 回答