установить значение раскрывающихся списков в Gridview с помощью JavaScript

Question

У меня есть раскрывающийся список и сетка с раскрывающимся списком в каждой строке. Я удалил другие столбцы в Grid для простоты.

Всякий раз, когда выбирается новое значение в раскрывающемся списке, я хотел бы установить все раскрывающиеся списки в виде сетки на то же значение через 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>

При нажатии на раскрывающееся меню я получаю оповещение с надписью «тест» и оповещение с надписью «[объект объекта]», однако с раскрывающимися списками ничего не происходит, и оповещение (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;
    }
}

Также убедитесь, что AutoPostBack = "true" для DropDownList3.

Другой подход (который не очень чистый или простой) - добавить следующий код в метод Page_Load (и удалить блок скрипта, содержащий функцию onJDSelection, из файла .aspx):

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

Обратите внимание, что в этом случае идентификатор, используемый для получения DropDownList3 и GridView2 в javascript, отправляется из кода, поскольку не очень безопасно полагаться на идентификаторы серверного элемента управления, сгенерированные ASP .NET.Если вы хотите сохранить значения выпадающих списков (которые изменяются с помощью 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. Он имеет множество частичных селекторов имен и входных селекторов, которые вы можете использовать для получения всех ваших 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);
    });
}