set value of dropdown lists in Gridview with javascript

Question

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.

Answer 1

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>

Answer 2

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