Question

我有一个下拉列表和一个gridview，每行都有一个下拉列表。为简单起见，我删除了Grid中的其他cols。

每当选择下拉列表中的新值时，我想通过javascript将gridview中的所有下拉列表设置为相同的值。（是的，网格外的下拉列表和网格内的下拉列表都填充了相同的数据源）

下拉列表：

<asp:DropDownList onchange="javascript:onJDSelection();" ID="DropDownList3" runat="server" 
        DataSourceID="SqlDataSource4" DataTextField="circt_cstdn_nm" 
        DataValueField="circt_cstdn_user_id">
    </asp:DropDownList>

GridView：

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1" onrowdatabound="GridView2_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="Change to Job Designer" SortExpression="circt_Cstdn_nm">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("circt_Cstdn_nm") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:DropDownList ID="ddl_jd" runat="server" DataSourceID="SqlDataSource4" DataTextField="CIRCT_CSTDN_NM" 
                        DataValueField="CIRCT_CSTDN_user_id"></asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

我目前的尝试：

function onJDSelection() {

    var jd = document.getElementById('ctl00_MAIN_DropDownList3').Text;
    var grid = document.getElementById('ctl00_MAIN_GridView2');  
    for (var i = 1; i < grid.rows.length; i++) {
        grid.rows[i].cells[0].getElementsByTagName("*")[1].selectedText = jd;

    }
}

任何想法？

谢谢！

更新：我试过了。

<script type="text/javascript">
    function onJDSelection() {
        var jd = document.getElementById('ctl00_MAIN_DropDownList3').Text;
        var dropDowns = jQuery('input[id^=ctl00_MAIN_GridView2_ddl_jd]');
        alert("test");
        alert(dropDowns);
        var i = 0;
        dropDowns.each(function () {
            alert(i);
            i++;
            jQuery('#' + jQuery(this) + ':first-child').text(jd);
        });
    }
</script>

当点击下拉列表时，我会收到一条提示“test”的警报和一条显示“[Object object]”的警告但是网格中的下拉菜单没有任何反应，警报（i）从不触发。

Answer 1

我建议从后面的代码更改下拉列表的选定值，如下所示：

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
    foreach (GridViewRow gvRow in GridView2.Rows)
    {
        Control ctrl = gvRow.FindControl("ddl_jd");
        DropDownList ddl = ctrl as DropDownList;
        if (ddl != null)
            ddl.SelectedIndex = DropDownList3.SelectedIndex;
    }
}

还要确保为DropDownList3设置AutoPostBack =“true”。

另一种方法（不是很干净或简单）是将以下代码添加到Page_Load方法中（并从.aspx文件中删除包含onJDSelection函数的脚本块）：

    if (!Page.IsPostBack)
    {
        string functionContent = "<script language=javascript> function onJDSelection()" + 
            "{ var selectedIndex = document.getElementById('" + DropDownList3.ClientID + "').selectedIndex;" + 
            "var grid = document.getElementById('" + GridView2.ClientID + "');  " +
            "for (var i = 1; i < grid.rows.length; i++) " +
                "{ var selObj = grid.rows[i].cells[0].getElementsByTagName(\"*\")[0]; selObj[selectedIndex].selected = true;} "+
            "}</script>";
        Page.RegisterStartupScript("MyScript", functionContent);
        DropDownList3.Attributes.Add("onchange", "onJDSelection()");
    }.

请注意，在这种情况下，用于在javascript中检索DropDownList3和GridView2的ID是从代码后面发送的，因为依赖ASP .NET生成的服务器控件ID并不是非常安全。如果您想保存下拉列表值（使用javascript更改），您还需要其他代码。

它的工作原理基于aspx页面的以下主体：

<body>
<form id="form1" runat="server">
<div>
    <asp:DropDownList ID="DropDownList3" runat="server" 
        DataSourceID="SqlDataSource1" DataTextField="circt_cstdn_nm" 
        DataValueField="circt_cstdn_user_id" onselectedindexchanged="DropDownList3_SelectedIndexChanged">
    </asp:DropDownList>

        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" 
            onrowdatabound="GridView2_RowDataBound" DataKeyNames="circt_cstdn_user_id">
            <Columns>
                <asp:TemplateField HeaderText="Change to Job Designer" SortExpression="circt_Cstdn_nm" >
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("circt_Cstdn_nm") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:DropDownList ID="ddl_jd" runat="server" DataSourceID="SqlDataSource1" DataTextField="CIRCT_CSTDN_NM" 
                            DataValueField="CIRCT_CSTDN_user_id"></asp:DropDownList>
                    </ItemTemplate>
            </asp:TemplateField>

            </Columns>
        </asp:GridView>


    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:TestConnectionString %>" 
        SelectCommand="SELECT * FROM [test]"></asp:SqlDataSource>
</div>
</form>

Answer 2

如果可能的话，我建议您使用jQuery。它有许多partial name selectors和输入选择器，您可以使用它们来获取所有DropDowns。你可以使用类似的东西：

function onJDSelection() {
    var jd = document.getElementById('ctl00_MAIN_DropDownList3').Text;
    var dropDowns = jQuery('input[id^=ctl00_MAIN_GridView2_ddl_jd]');

    dropDowns.each(function() {
        jQuery('#' + jQuery(this) + ':first-child').text(jd);
    });
}

使用javascript在Gridview中设置下拉列表的值

2 个答案: