Question

我在尝试隐藏/显示ASP下拉列表时遇到问题，具体取决于某些条件。我正在尝试使用jQuery来避免回发。

下面的代码是一个更大的项目的改进和缩小版本。这个概念是单击gridview（gv1）中的linkbutton（lnkBtn），然后显示下拉列表（ddlTS）。一旦在下拉列表中进行了选择，jQuery函数就会触发，使下拉列表再次不可见。这一切看起来都很好，直到在另一行上做出选择。原始行和新行的下拉列表都可见。

我想可能有更好的方法，但我似乎无法使其发挥作用。如果有人能指出我正确的方向，那将非常感激。

<div>
    <asp:HiddenField ID="hdnRow" runat="server" />
    <asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" OnRowCommand="gv1_RowCommand">
        <Columns>
            <asp:TemplateField HeaderText="TimeZone">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtn" runat="server" CommandArgument='<%# Container.DataItemIndex %>'
                        CommandName="PostTimestamp" Text='<%# bind("edw_tz") %>'></asp:LinkButton>
                    <asp:DropDownList ID="ddlTS" runat="server" CssClass="ddl_None">
                        <asp:ListItem>0</asp:ListItem>
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>2</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

protected void gv1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "PostTimestamp")
    {
        int row = int.Parse(e.CommandArgument.ToString());
        ((DropDownList)gv1.Rows[row].FindControl("ddlTS")).CssClass = "ddlclass_Inline";
        hdnRow.Value = row.ToString();
    }
}

$(document).ready(function () {
    $("[id*=gv1][id*=ddlTS]").change(function () {
        var row = $('#hdnRow').val();
        $('[id$=gv1_ddlTS_' + row + ']').removeClass('ddl_Inline').addClass('ddl_None');
    });
});

Answer 1

你为什么使用Row-command Event ..？只是得到索引..？。这是一个不必要的回复。你可以使用像这样的脚本点击链接按钮从客户端获取索引。

var index = $("#gv1").closest('tr').prevAll().length - 1;

Answer 2

在LinkButton模板中为DropDownList和GridView添加CssClass名称例如我们分配了

CssClass="lbtnGV"

LinkButton 和

CssClass="ddlGV"

代表DropDownList

现在jquery

$(document).ready(function(){
$('.lbtnGV').click(function(e){
    e.preventDefault();
    $(this).siblings('.ddlGV').show(0);
});
$('.ddlGV').change(function(e){
    e.preventDefault();
    $(this).hide(0);
});
});

试试这个

Answer 3

我不太确定，但我明白了：

默认情况下，下拉列表会被隐藏，点击链接按钮时也会显示相同的内容。您希望在下拉列表选择发生更改时隐藏下拉列表。但是当你选择第一行的第一个下拉列表时，它可以正常工作，但是当你对下一行的下一个链接按钮执行相同操作时，这次上一个下拉列表也会随着实际候选下拉列表（应该是可见的）而变得可见。 / p>

所以，如果这是你想要的和正在做的事情，我想在下拉列表中添加或删除css类会使它们可见或不可见存在问题。

这是我编码的内容，希望它可以帮到你

jsFiddle

$(document).ready(function(){
$('.btnLnk').click(function(){ //btnLink is cssclass for linkbutton
    var i=0;
    // iterate through all dropdown to hide them
    $(this).closest("#tblGrid").find("tr").each(function(index, obj){ //tblGrid is id of gridview
        $(obj).find("select").hide();
    });

    //make the actual visible
    $(this).next("select").show();
});

// Again iterate to hide all the dropdown in selection change of a dropdown
$("select").change(function(){
    $(this).closest("#tblGrid").find("tr").each(function(index, obj){
        $(obj).find("select").hide();
    });
});
});

Gridview Templatefield中的DropDownList，使用jQuery切换可见性

3 个答案: