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

发布于 2024-09-28 06:23:02 字数 2328 浏览 4 评论 0原文

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

每当选择下拉列表中的新值时，我想通过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>

单击下拉列表时，我收到一条显示“测试”的警报和一条显示“[对象对象]”的警报，但是网格中的下拉列表没有任何反应，并且警报（i）永远不会触发。

原文

I have a dropdownlist and a gridview with a drop down list in every row. I have removed other cols in Grid for simplicity.

Whenever a new value in the dropdownlist is selected I would like to set all of the dropdownlists in the gridview to that same value via javascript. (Yea both the dropdownlist outside the gird and the ones inside the grid are populated by the same data source)

The dropdownlist:

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

The 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>

My current attempt:

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;

    }
}

any ideas?

Thanks!

Update: I tried this.

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

When clicking on the dropdown I get an alert that says "test" and an alert that says "[Object object]" However nothing happens with the dropdowns in the grid and the alert(i) never fires.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愛上了 2024-10-05 06:23:02

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

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

请注意，在这种情况下，ID 用于检索 DropDownList3 和 GridView2 javascript 中的控件是从代码后面发送的，因为依赖 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>

I suggest to change the selected values for the dropdownlists from code behind like this:

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

Also make sure to set AutoPostBack="true" for DropDownList3.

Another approach (that is not very clean or simple) is to add the following code into the Page_Load method (and remove the script block containing onJDSelection function from the .aspx file):

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

Note that is this case the ID used for retrieving DropDownList3 and GridView2 in javascript are sent from code behind as is not very safe to rely on server control ID's generated by ASP .NET. In case you want to save the dropdownlists values (that are changed using javascript) you will also need additional code.

It works based on the following body for aspx page:

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

回复收藏 0 原文

情话难免假 2024-10-05 06:23:02

如果可能的话，我建议你使用 jQuery。它有大量的部分名称选择器和输入选择器，您可以使用它们来获取所有下拉菜单。你可以使用类似的东西：

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

If possible, I'd suggest that you use jQuery. It has a multitude of partial name selectors and input selectors that you can use to get all of your DropDowns. You could use something like:

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 原文

~没有更多了~