文章/答案/技术大牛

发布

社区首页 >问答首页 >用javascript在Gridview中设置下拉列表的值

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

Stack Overflow用户

提问于 2010-10-20 19:09:47

回答 2查看 9.5K关注 0票数 1

我有一个下拉列表和一个网格视图，每行都有一个下拉列表。为了简单起见，我在网格中删除了其他cols。

每当在dropdownlist中选择一个新值时，我希望通过javascript将网格视图中的所有下拉列表设置为相同的值。(是的，网格外部的下拉列表和网格内的下拉列表都由相同的数据源填充)

下拉列表：

<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)永远不会触发。

javascript

asp.net

gridview

drop-down-menu

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-10-20 22:38:18

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

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>

票数 1

Stack Overflow用户

发布于 2010-10-20 22:57:02

如果可能，我建议您使用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);
    });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3977118

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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