Javascript 在我的dropdownlist索引更改后无法更改CssClass

我有一个问题，我需要在asp:textbox上启用datepicker函数，在我更改了对某些索引的asp:dropdownlist选择之后

这是我的asp:dropdownlist控件，在该控件中，我通过编程方式从代码隐藏中指定了值：

<asp:DropDownList ID="ddlHORating" runat="server" CssClass="ctlControl" />

这是my asp:textboxt控件，该控件应在其上启用datepicker函数。一旦我选择dropdownlist中的项目，当前datepicker函数将仅通过它CSCLASS启用。如果值为“watermarkText”，则需要将其更改为“watermarkDate”：

这是我使用的脚本：

    <script type="text/javascript">
    $(document).ready(function ICRESDateEnabler() {
        var ddl = document.getElementById('<%= ddlHORating.ClientID %>');
        var ddlID = ddl.selectedIndex;
        alert("Selected Index is : " + ddl.selectedIndex);
        if (parseInt(ddlID) >= 4) {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkText";
            alert("It's working");//Testing
        }
        else {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkDate";
            alert("Failed!");//Testing
        }
    });
</script>

$（文档）.ready（函数ICRESDateEnabler（）{
var ddl=document.getElementById（“”）；
var ddlID=ddl.selectedIndex；
警报（“所选索引为：“+ddl.selectedIndex”）；
if（parseInt（ddlID）>=4）{
document.getElementById（“”）.className=“watermarkText”；
警报（“正在工作”）；//正在测试
}
否则{
document.getElementById（“”）.className=“水印日期”；
警报（“失败！”；//正在测试
}
});

我的脚本将继续运行&无论选择什么，都会提示“失败”。 它应该在我的asp:textbox的右边有datepicker图标，但不会

有人能给我指出一个正确的方向来实现这一点吗

更新：

我现在通过将ddlID更改为parseInt（dllID）来更改asp:textbox的类名，但仍然无法使日期选择器图标可见

更新日期：2013年1月18日~添加真实代码（仅相关）

好的，伙计们，这是我已经为这个问题修剪过的代码，希望它能让你们检查一下：

.body
{
宽度：1100px；
表格布局：自动；
边框样式：无；
边框宽度：1pt；
垂直对齐：中心对齐；
背景色：白色！重要；
字体系列：verdana、arial、helvetica、无衬线；
颜色：#000000；
}
lblDesc先生
{
颜色：#ed1b24；
字体大小：14pt！重要；
边框底宽：1px；
边框底部样式：实心；
边框底色：#fabea6；
左侧填充：5px；
}
.t车身
{
宽度：100%；
表格布局：自动；
边框样式：无；
边框宽度：1pt；
垂直对齐：中心对齐；
}
特罗先生
{
高度：35px！重要；
文本对齐：左！重要；
背景重复：无重复；
}
.tdLabel
{
字号：8pt；
字体大小：粗体；
颜色：#525252；
左侧填充：10px；
}
.tdControl
{
边框颜色：继承；
边框宽度：1px；
宽度：35%；
边框样式：无；
背景色：rgb（249249）；
左边距：40px；
}
.TDB按钮
{
文本对齐：对！重要；
右边填充：40px；
}
.CTL按钮
{
边框样式：实心；
边框顶部样式：实心；
边界：1px；
宽度：120px；
}
.CTL控制
{
宽度：89%；
左侧填充：5px；
}
.tdSplitter
{
宽度：2%；
边框样式：无；
}
1.水印日期
{
颜色：#999；
宽度：89%；
左侧填充：5px；
字体：斜体；
字体系列：verdana、arial、helvetica、无衬线；
}
.水印文本
{
颜色：#999；
宽度：89%；
左侧填充：5px；
字体：斜体；
字体系列：verdana、arial、helvetica、无衬线；
}
.仅限现金
{
颜色：#999；
文本对齐：左对齐；
宽度：89%；
左侧填充：5px；
字体：斜体；
}
.数字
{
颜色：#999；
宽度：89%；
左侧填充：5px；
字体：斜体；
}
$（函数（）{
$（“.watermarkDate”）。每个（函数（）{
$txt=$（此）.datepicker({
展示：“按钮”，
buttonImage:“\u layouts/EAR/images/Calendar.png”，
buttonImageOnly:正确，
日期格式：“dd-MM-yy”，
showButtonPanel：是的，
onClose：函数（e）{
var ev=窗口事件；
如果（ev.srceelement.innerHTML=='Clear'）
this.value=“仅从日历按钮中选择日期”；
},
关闭文本：“清除”，
按钮文字：“
});
$txt.addClass（“水印日期”）；
CalculateDay（）；
});
$（“.watermarkDate”）.focus（函数（）{
$txt=$（此）.datepicker({
展示：“按钮”，
buttonImage:“\u layouts/EAR/images/Calendar.png”，
buttonImageOnly:正确，
日期格式：“dd-MM-yy”，
showButtonPanel：是的，
onClose：函数（e）{
var ev=窗口事件；
如果（ev.srceelement.innerHTML=='Clear'）
this.value=“仅从日历按钮中选择日期”；
},
关闭文本：“清除”，
按钮文字：“
});
$txt.addClass（“水印日期”）；
CalculateDay（）；
});
$（“.watermarkDate”）.blur（函数（）{
$txt=$（此）.datepicker({
展示：“按钮”，
buttonImage:“\u layouts/EAR/images/Calendar.png”，
buttonImageOnly:正确，
日期格式：“dd-MM-yy”，
showButtonPanel：是的，
onClose：函数（e）{
var ev=窗口事件；
如果（ev.srceelement.innerHTML=='Clear'）
this.value=“仅从日历按钮中选择日期”；
},
关闭文本：“清除”，
按钮文字：“
});
ddlHORating.Attributes.Add("onchange", "JavaScript: ICRESDateEnabler();");

<asp:TextBox ID="txtICRESRevDate" runat="server" CssClass="watermarkText" Text="Select a date from calendar button only" Tooltip="Select a date from calendar button only" />

    <script type="text/javascript">
    $(document).ready(function ICRESDateEnabler() {
        var ddl = document.getElementById('<%= ddlHORating.ClientID %>');
        var ddlID = ddl.selectedIndex;
        alert("Selected Index is : " + ddl.selectedIndex);
        if (parseInt(ddlID) >= 4) {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkText";
            alert("It's working");//Testing
        }
        else {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkDate";
            alert("Failed!");//Testing
        }
    });
</script>

    .body
    {
        width: 1100px;
        table-layout: auto;
        border-style: none;
        border-width: 1pt;
        vertical-align: central;
        background-color: white !important;
        font-family:verdana,arial,helvetica,sans-serif;
        color:#000000;
    }

    .lblDesc 
    {
        color: #ed1b24;
        font-size: 14pt !important;
        border-bottom-width: 1px; 
        border-bottom-style: solid; 
        border-bottom-color: #fabea6;
        padding-left: 5px;
    }

    .tblBody
    {
        width: 100%;
        table-layout: auto;
        border-style: none;
        border-width: 1pt;
        vertical-align: central;
    }

    .trRow
    {
        height: 35px !important;
        text-align: left !important;
        background-repeat: no-repeat;
    }

    .tdLabel
    {
        font-size: 8pt;
        font-weight: bold;
        color: #525252;
        padding-left: 10px;
    }

    .tdControl
    {
        border-color: inherit;
        border-width: 1px;
        width : 35%;
        border-style: none;
        background-color: rgb(249, 249, 249);
        margin-left: 40px;
    }

    .tdButton
    {
        text-align: right !important;
        padding-right: 40px;
    }

    .ctlButton 
    {
        border-style: solid;
        border-top-style: solid;
        border: 1px;
        width: 120px;
    }

    .ctlControl
    {
        width: 89%;
        padding-left: 5px;
    }

    .tdSplitter
    {
        width: 2%;
        border-style: none;
    }

    .watermarkDate
    {
        color:#999;
        width: 89%;
        padding-left: 5px;
        font-style:italic;
        font-family:verdana,arial,helvetica,sans-serif;
    }

    .watermarkText
    {
        color:#999;
        width: 89%;
        padding-left: 5px;
        font-style: italic;
        font-family:verdana,arial,helvetica,sans-serif;
    }

    .currenciesOnly 
    {
        color:#999;
        text-align: left;
        width: 89%;
        padding-left: 5px;
        font-style: italic;
    }

    .numeric 
    {
        color:#999;
        width: 89%;
        padding-left: 5px;
        font-style: italic;
    }
</style>
<script type="text/javascript" src="~/_layouts/script/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/_layouts/script/jquery-ui.js"></script>
<script type="text/javascript" src="~/_layouts/script/jquery.ui.widget.js"></script>
<script type="text/javascript" src="~/_layouts/script/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="~/_layouts/script/jquery.autocomplete.js"></script>
<script type="text/javascript" src="~/_layouts/script/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="~/_layouts/script/jquery-currency.js"></script>
<script type="text/javascript" src="~/_layouts/script/jquery.numeric.js"></script>
<script type="text/javascript" src="~/_layouts/script/moment.js"></script>
<script type="text/javascript">
    $(function () {
        $(".watermarkDate").each(function () {
            $txt = $(this).datepicker({
                showOn: "button",
                buttonImage: "_layouts/EAR/images/Calendar.png",
                buttonImageOnly: true,
                dateFormat: "dd-MM-yy",
                showButtonPanel: true,
                onClose: function (e) {
                    var ev = window.event;
                    if (ev.srcElement.innerHTML == 'Clear')
                        this.value = "Select a date from calendar button only";
                },
                closeText: "Clear",
                buttonText: ""
            });
            $txt.addClass("watermarkDate");
            CalculateDay();
        });
        $(".watermarkDate").focus(function () {
            $txt = $(this).datepicker({
                showOn: "button",
                buttonImage: "_layouts/EAR/images/Calendar.png",
                buttonImageOnly: true,
                dateFormat: "dd-MM-yy",
                showButtonPanel: true,
                onClose: function (e) {
                    var ev = window.event;
                    if (ev.srcElement.innerHTML == 'Clear')
                        this.value = "Select a date from calendar button only";
                },
                closeText: "Clear",
                buttonText: ""
            });
            $txt.addClass("watermarkDate");
            CalculateDay();
        });
        $(".watermarkDate").blur(function () {
            $txt = $(this).datepicker({
                showOn: "button",
                buttonImage: "_layouts/EAR/images/Calendar.png",
                buttonImageOnly: true,
                dateFormat: "dd-MM-yy",
                showButtonPanel: true,
                onClose: function (e) {
                    var ev = window.event;
                    if (ev.srcElement.innerHTML == 'Clear')
                        this.value = "Select a date from calendar button only";
                },
                closeText: "Clear",
                buttonText: ""
            });
            $txt.addClass("watermarkDate");
            CalculateDay();
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $(".watermarkText").each(function () {
            $txt = $(this);
            if ($txt.val() != this.title) {
                $txt.removeClass("watermark");
            }
        });
        $(".watermarkText").focus(function () {
            $txt = $(this);
            if ($txt.val() == this.title) {
                $txt.val("");
                $txt.removeClass("watermark");
            }
        });
        $(".watermarkText").blur(function () {
            $txt = $(this);
            if ($.trim($txt.val()) == "") {
                $txt.val(this.title);
                $txt.addClass("watermark");
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".numeric").numeric(false, function () {
            alert("Integers only");
            this.value = "0 month";
            this.focus();
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function CalculateDay() {
        var m, n, d, e, f, months, dtCurrDate, dtCurrDate_unixtime, ctlHORevDate, ctlCasLineExpDate, ctlMonthOverDue, newHORevDate, newCasLineExpDate, newMonthOverDue, newHORevDate_unixtime, newCasLineExpDate_unixtime, newMonthOverDue_unixtime, diffCountDayHORevDate, diffCasLineExpDate, diffCountDayMonthOverDue;
        var months = new Array(12);
        months[0] = "January";
        months[1] = "February";
        months[2] = "March";
        months[3] = "April";
        months[4] = "May";
        months[5] = "June";
        months[6] = "July";
        months[7] = "August";
        months[8] = "September";
        months[9] = "October";
        months[10] = "November";
        months[11] = "December";

        ctlHORevDate = document.getElementById('<%= txtHORevDate.ClientID %>').value;
        ctlCasLineExpDate = document.getElementById('<%= txtCasLineExpDate.ClientID %>').value;

        if (ctlCasLineExpDate != "Select a date from calendar button only") {
            ctlCasLineExpDate = ctlCasLineExpDate.split('-');
            var i = 0;
            while (i <= 12) {
                if (ctlCasLineExpDate[1] == months[i])
                    ctlCasLineExpDate[1] = i + 1;
                i++;
            }

            f = moment(new Date(ctlCasLineExpDate[2], ctlCasLineExpDate[1] - 1, ctlCasLineExpDate[0])).subtract('months', 4).format("DD-MMMM-YYYY");

            document.getElementById('<%= txt4MontBefExpDate.ClientID %>').value = f;//Get date 4 month before Cash Line Expiry Date
        }

        if (ctlHORevDate != "Select a date from calendar button only") {
            ctlHORevDate = ctlHORevDate.split('-');
            var i = 0;
            while (i <= 12) {
                if (ctlHORevDate[1] == months[i])
                    ctlHORevDate[1] = i + 1;
                i++;
            }

            newHORevDate = ctlHORevDate[2] + "-" + ctlHORevDate[1] + "-" + ctlHORevDate[0];
            newHORevDate = newHORevDate.split('-');

            d = new Date(newHORevDate[0], (newHORevDate[1] - 1), newHORevDate[2]);
            e = moment().format('YYYY-MM-DD');
            e = e.split('-');
            e = new Date(e[0], (e[1] - 1), e[2]);

            m = d.getMonth();
            n = e.getMonth();

            months = (e.getMonth() + 1) - d.getMonth() + (12 * (e.getFullYear() - d.getFullYear()));

            document.getElementById('<%= txtMonthOverDue.ClientID %>').value = months + " month";//Get month overdue
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function ICRESDateEnabler() {
        var ddl = document.getElementById('<%= ddlHORating.ClientID %>');
        var ddlID = ddl.selectedIndex;
        alert("Selected Index is : " + ddl.selectedIndex + "\nAnd it's really : " + ddlID + "\nAfter convert to int is : " + parseInt(ddlID));//Testing
        if (parseInt(ddlID) <= 26) {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkText";
            alert("It's working, ICRES rating is below 13E & class is : \n" + document.getElementById('<%= txtICRESRevDate.ClientID %>').className);//Testing
        }
        else {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkDate";
            alert("It's working!, ICRES rating is 13E above & class is : \n" + document.getElementById('<%= txtICRESRevDate.ClientID %>').className);//Testing
        }
    });
</script>
</head>
<body>
<table ID="tblBody" class="body">
    <tr ID="tr04" class="trRow">
        <td class="tdSplitter">
                  </td>
        <td class="tdLabel">Business Centre</td>
        <td class="tdControl">
            <asp:DropDownList ID="ddlBusinessCentre" runat="server" CssClass="ctlControl" />
        </td>
        <td class="tdSplitter">
                  </td>
        <td class="tdLabel">Rating</td>
        <td class="tdControl">
            <asp:DropDownList ID="ddlHORating" runat="server" AutoPostBack="true" CssClass="ctlControl" />
        </td>
        <td class="tdSplitter">
                  </td>
    </tr>
    <tr ID="tr05" class="trRow">
        <td class="tdSplitter">
                  </td>
        <td class="tdLabel">Zone</td>
        <td class="tdControl">
            <asp:DropDownList ID="ddlZone" runat="server" CssClass="ctlControl">
                <asp:ListItem Enabled="true" Text="Please select..." Selected="True" />
                <asp:ListItem Enabled="true" Value="0" Text="Zone 1" />
                <asp:ListItem Enabled="true" Value="1" Text="Zone 2" />
                <asp:ListItem Enabled="true" Value="2" Text="Zone 3" />
            </asp:DropDownList>
        </td>
        <td class="tdSplitter">
                  </td>
        <td class="tdLabel">ICRES 13A Or Worse (New Review Date)</td>
        <td class="tdControl">
            <asp:TextBox ID="txtICRESRevDate" runat="server" CssClass="watermarkText" Text="Select a date from calendar button only" Tooltip="Select a date from calendar button only" />
        </td>
        <td class="tdSplitter">
      </td>
    </tr>
</table>

protected void Page_Load(object sender, EventArgs e)
{
    SetAttribute();
}

protected void Page_Init()
{
    LoadRatingList();
}

public void LoadRatingList()
{
    try
    {
        using (SPSite spSite = SPContext.Current.Site)
        {
            using (SPWeb spWeb = spSite.OpenWeb())
            {
                SPList spListOpen = spWeb.Lists["Rating"];

                SPQuery spQuery = new SPQuery();

                spQuery.Query = "<Where><Eq><FieldRef Name='Activator' /><Value Type='Boolean'>1</Value></Eq></Where>";
                SPListItemCollection spItemCollection = spListOpen.GetItems(spQuery);

                if (!spItemCollection.Count.Equals(0))
                {
                    ddlHORating.Items.Add("Please select...");
                    ddlHORating.SelectedItem.Attributes.CssStyle.Add("color", "Red");
                    int i = 0;
                    foreach (SPListItem spItem in spItemCollection)
                    {
                        string statAct = spItem["Activator"].ToString();
                        string statVal = spItem["Title"].ToString();

                        if (statAct.Equals("True"))
                        {
                            ddlHORating.Visible = true;
                            ddlHORating.Items.Add(spItem["Title"].ToString());
                            i++;
                            ddlHORating.SelectedValue = null;
                        }
                    }
                }
                else
                {
                    ddlHORating.BackColor = System.Drawing.Color.Red;
                    Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Data not available in Rating dropdown list!');", true);
                }
            }
        }
    }
    catch (Exception ex)
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Error at populate Rating value : " + ex.Message + "');", true);
    }
}

public void SetAttribute()
{
    ddlHORating.Attributes.Add("onchange", "JavaScript: ICRESDateEnabler();");

}
}

<script type="text/javascript">
    $(document).ready(function ICRESDateEnabler() {
        var ddl = document.getElementById('<%= ddlHORating.ClientID %>');
        var ddlID = ddl.selectedIndex;
        alert("Selected Index is : " + ddl.selectedIndex + "\nAnd it's really : " + ddlID + "\nAfter convert to int is : " + parseInt(ddlID));
        if (parseInt(ddlID) <= 26) {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkText";
            alert("It's working, ICRES rating is below 13E & class is : \n" + document.getElementById('<%= txtICRESRevDate.ClientID %>').className);//Testing
            $(document.getElementById('<%= txtICRESRevDate.ClientID %>')).value = "Select a date from calendar button only";
        }
        else {
            document.getElementById('<%= txtICRESRevDate.ClientID %>').className = "watermarkDate";
            alert("It's working!, ICRES rating is 13E above & class is : \n" + document.getElementById('<%= txtICRESRevDate.ClientID %>').className);//Testing
            $(document.getElementById('<%= txtICRESRevDate.ClientID %>')).datepicker().datepicker("show");
        }
    });
</script>