如何使用jquery计算gridview内下拉列表中的选定选项

Question

我的 gridview 中有几个下拉列表，每个都有 2 个相同的选项，我想从所有这些下拉列表中计算选择选项 1 的次数（selectedIndex = 1）以及选择第二个选项的次数（selectedIndex = 2) 使用 jQuery。

<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 列中，我想显示 option1 和 option2 的选择总数。

Answer 1

第一个选项： 你可以声明两个全局变量

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 2

使用RowDataBound事件在下拉列表的Onchange事件上声明Javascript函数为Follow...

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

Answer 3

我解决了我的问题我的解决方案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
         );
    });
});