如何使用jQuery來計算GridView中選定的選項

Question

我在gridview中有幾個下拉列表，每個選項都有兩個相同的選項，我想從所有這些下拉列表中選擇多少次select1（selectedIndex = 1）和使用jQuery選擇第二個選項多少次（selectedIndex = 2）。

<asp:GridView ID="gd1" runat="server" AutoGenerateColumns="False" 
     onrowdatabound="gd1_RowDataBound" > 
     <Columns> 
        <asp:BoundField DataField="id" Visible="False"/> 
        <asp:BoundField DataField="fullName" Visible="True" 
     HeaderText="Full Name"/> 
         <asp:TemplateField > 
          <ItemTemplate> 
<asp:DropDownList ID="ddl1" runat="server" ></asp:DropDownList> 
         </ItemTemplate> 
         </asp:TemplateField> 

         <asp:TemplateField > 
          <ItemTemplate> 
<asp:DropDownList ID="ddl2" runat="server"></asp:DropDownList> 
         </ItemTemplate> 
         </asp:TemplateField> 

         <asp:TemplateField > 
          <ItemTemplate> 
<asp:DropDownList ID="ddl3" runat="server"></asp:DropDownList> 
         </ItemTemplate> 
         </asp:TemplateField> 

         <asp:TemplateField> 
          <HeaderTemplate> 
      <asp:Label ID="Count1" runat="server" Text="First Count"></asp:Label> 
          </HeaderTemplate> 
          <ItemTemplate> 
      <asp:Label ID="CountSelected1" runat="server" ></asp:Label> 
          </ItemTemplate> 
         </asp:TemplateField> 

         <asp:TemplateField> 
          <HeaderTemplate> 
     <asp:Label ID="Count2" runat="server" Text="Second Count"></asp:Label> 
          </HeaderTemplate> 
          <ItemTemplate> 
      <asp:Label ID="CountSelected2" runat="server" ></asp:Label> 
          </ItemTemplate> 
         </asp:TemplateField> 
     </Columns> 

</asp:GridView> 

在最後2列中，我想顯示選項1和選項2的總數。

Answer 1

我解決我的問題我解決here

的作品最終代碼：

var collection = $('select.ddlJ'); 

for (var element in collection) 
$(element).change(function(){}) 

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

Answer 2

第一種選擇： 你可以聲明兩個全局變量

var first=0; 
var second=0; 

，然後執行以下操作：

$(function(){ 
    $("#selectBox").change(function(){ 
     switch($(this).val()) 
     { 
      case "0": first++; 
         break; 
case "1": second++; 
         break; 
     } 
    }); 
}); 

此功能對於複選框寫着：

<select id="selectBox"> 
      <option value="0" id="first">FirstOption</option> 
      <option value="1" id="second">SecondOption</option> 
</select> 

第一個選項不是很重要但快速的解決方案。

第二個選項：

您可以創建的jQuery插件，可以算的選擇，然後就用這個小部件包裝你的複選框。下面是示例小部件的（我從別人的博客複製，但失去了聯繫，讓你的源代碼，希望我的例子將是有益的）

<script type="text/javascript"> 
    var Green = { 
     // Set up the widget 
     _create: function() { 
     }, 
     _init: function() { 
      this.setLevel(this.getLevel()); 
     }, 
     getLevel: function() { return this.options.level; }, 
     setLevel: function (x) { 
      var greenLevels = this.options.greenLevels; 
      var level = Math.floor(Math.min(greenLevels.length - 1, Math.max(0, x))); 
      this.options.level = level; 
      this.element.css({ background: greenLevels[level] }); 
     }, 
     options: { 
      level: 5, 
      greenLevels: ['#000', '#010', '#020', '#030', '#040', '#050', '#060', '#070', '#080', '#090', '#0a0', '#0b0', '#0c0', '#0d0', '#0e0', '#0f0', '#fff'] 
     }, 
     darker: function() { 
      this.setLevel(this.getLevel() - 1); 
     }, 
     lighter: function() { 
      this.setLevel(this.getLevel() + 1); 
     }, 
     off: function() { 
      debugger; 
      this.element.css({ background: 'none' }); 
      this.destroy(); 
     }, 
     _setOptions: function() { 
      $.Widget.prototype._setOptions.apply(this, arguments); 
      this._refresh(); 
     } 
    }; 

    $(function() { 
     (function ($, undefined) { 
      $.widget('ui.green', Green); 
     })(jQuery); 
    }); 

    function on() { 
     $('.targetDiv').green(
      { level: 8, 
       greenLevels: ['#000', '#00f', '#088', '#0f0', '#880', '#f00', '#808', '#fff'] 
      }); 
    } 

</script> 

<p class="targetDiv"> 
    This is a test div text.</p> 
<input type="button" value="On" onclick="return on()" /> 
<input type="button" value="Lighter" onclick="$('.targetDiv').green('lighter');" /> 
<input type="button" value="Darker" onclick=" $('.targetDiv').green('darker');" /> 
<input type="button" value="Off" onclick=" $('.targetDiv').green('off');" /> 

Answer 3

使用RowDataBound事件要在下拉列表如下的onChange事件聲明JavaScript函數...

protected void grd_RowDataBound(object sender,GridViewRowEventArgs e)      
{       
    if (e.Row.RowType == DataControlRowType.DataRow) 
    {       
    DropdownList drpLst = ((DropdownList)e.Row.FindControl("ddl1")); 
    Label lblCount2= (Label)e.Row.FindControl("Count2"); 

    drpLst.Attributes["onchange"]="calculate(this,'"+lblCount2.ClientID+"');"     

    } 
} 

的Javascript：

var count=0;//This should be Global 
function calculate(drpDownList,labelId) 
{ 
    if(drpDownList.selectedIndex==0) 
    { 
     count=count+1; 
    } 
    labelId.innerHTML=count; 
}