在GridView的下拉列表中设置的值与JavaScript [英] set value of dropdown lists in Gridview with javascript

问题描述

我有一个DropDownList，并与每行中的下拉列表的GridView。我在网格中删除其他COLS为简单起见。

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

只要选择在DropDownList一个新值，我想设置所有dropdownlists在GridView控件通过javascript相同的值。 （是的两个网格外的dropdownlist和电网内的那些由相同的数据源填充）

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)

将DropDownList：

The dropdownlist:

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

GridView控件：

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>

我目前的尝试：

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>

在上下拉一下，我得到，说：测试，并且说的翻译：不过什么也没有发生在电网和警报（我）下拉式菜单中的警报不闪光。

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.

推荐答案

我建议改变所选值从code中的dropdownlists背后是这样的：

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

另外，还要确保设定的AutoPostBack =真的DropDownList3。

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

另一种方法（这是不是很干净或简单的）是添加以下code到Page_Load方法（并从.aspx文件包含onJDSelection功能脚本块）：

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

请注意，它是此情况下，用于在javascript中获取DropDownList3和GridView2的ID是从code发送的身后，也不是很安全依赖于通过ASP .NET生成服务器控件的ID。如果你要保存的dropdownlists值（即是使用JavaScript改变），你还需要额外的code。

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.

它的工作原理基于以下机构aspx页面：

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>

这篇关于在GridView的下拉列表中设置的值与JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！