Gridview内部的下拉框在回发时未保留背景色

Question

我在GridView:中的<asp:TemplateField>中有一个<asp:DropDownList>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="DatosTablaHandoff">
        <Columns>
            <asp:TemplateField HeaderText="STATUS">
                <ItemTemplate>
                    <asp:DropDownList ID="DropDownGV" runat="server" onchange="SetDropDownListColor(this);">
                    <asp:ListItem>Select...</asp:ListItem>
                    <asp:ListItem>Complete</asp:ListItem>
                    <asp:ListItem>Running</asp:ListItem>
                    <asp:ListItem>Waiting in SEV 1</asp:ListItem>
                    <asp:ListItem>No Batch</asp:ListItem>
                </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

我在js中有一个脚本，根据所选项目设置"项目背景色"：

function SetDropDownListColor(ddl) {
        for (var i = 0; i < ddl.options.length; i++) {
            if (ddl.options[i].selected) {
                switch (i) {
                    case 0:
                        ddl.style.backgroundColor = 'White';
                        return;
                    case 1:
                        ddl.style.backgroundColor = 'lightgreen';
                        return;
                    case 2:
                        ddl.style.backgroundColor = 'Yellow';
                        return;
                    case 3:
                        ddl.style.backgroundColor = 'orangered';
                        return;
                    case 4:
                        ddl.style.backgroundColor = 'Grey';
                        return;
                }
            }
        }
    }

一切正常。但当Postback时，颜色会消失。每一行中的"DropDown"都保持为我想要的"Selected Value"，但背景颜色为白色。

我有另一个脚本（在函数之外），用来在回发时"保存"颜色，但它只有在DropDownList在GridView:之外时才有效

window.addEventListener('load', function () { SetDropDownListColor(document.getElementById('<%= DropDownList1.ClientID %>')); }, false);

Answer 1

谢谢！它不是100%正确的，因为我不得不做一些改变，但它帮助很大！这就是对我有效的：

window.addEventListener('load', function () {
var dropdowns = new Array(); 
var gridview = document.getElementById('<%= GridView1.ClientID %>'); 
dropdowns = gridview.getElementsByTagName('select'); 
for (var i = 0; i < dropdowns.length; i++) { 
SetDropDownListColor(dropdowns[i]); } }, false); 

Answer 2

您可以给所有的DropDownList一个CssClass，然后循环通过该元素集合来调用SetDropDownListColor函数。

类似这样的东西：

净

<asp:DropDownList ID="DropDownGV" runat="server" CssClass="ddl" onchange="SetDropDownListColor(this);">

JS-

    window.addEventListener('load', function () {
        var ddls = document.querySelectorAll(".ddl");
        for (var i = 0, length = ddls.length; i < length; i++) {
            SetDropDownListColor(ddls[i]);
        }
    }, false);