javascript中的fadeIn（），fadeOut（）不起作用

Question

我想在网页的javascript中使用fadeIn和fadeOut；但是不起作用； 这是我的代码；您能告诉我问题出在哪里吗？它根本不淡入和淡出！！！

 $(document).ready(function () {

$("#DropDownList1").each(function () {

                $('ListItem', this).each(function () {

                    if ($(this).attr("selected") == true)

                        if (($(this).text() != "a")) {

                            $("div#select").fadeOut();
                                                  }
                        else {
                            $("div#select").fadeIn();

                        }
                });
            });
});

这是我的下拉列表：

 <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem Value=""></asp:ListItem>
            <asp:ListItem Value="m">a</asp:ListItem>
            <asp:ListItem Value="m1">b</asp:ListItem>
            </asp:DropDownList>

这是我实际的html：

<td class="style5" width="20%">
situation:&nbsp;
<br>
<select id="DropDownList1" name="DropDownList2">
<option value=""></option>
<option value="m">a</option>
<option value="m1">b</option>
</select>

Answer 1

将我的评论变成答案...

您应该查看浏览器看到的实际HTML（而不是ASP模板代码），因为我认为jQuery在HTML中看不到ListItem。 HTML中的标准下拉列表是<option>标记。 您的ASP可能正在生成该内容或其他内容。

在浏览器中执行“查看/源代码”，查看浏览器实际看到的HTML，并为此编写jQuery。 $('ListItem', this)可能找不到任何东西。 编写jQuery对其进行操作时，几乎应该永远不要使用ASP代码。 您需要知道将ASP模板转换为常规HTML后浏览器实际看到的内容。

仅供参考，您的代码的简化版本在更改下拉列表选择时也可以运行，如下所示：

$(document).ready(function () {

    function checkDropDownList() {
        if ($("#DropDownList1 option:selected").text() != "a") {
           $("#select").fadeOut();
        } else {
            $("#select").fadeIn();
        }
    }

    checkDropDownList();

    $("#DropDownList1").change(checkDropDownList);

});

如果只有一个选定的项目，并且我们已经知道只有一个DropDownList1则没有理由使用.each() 。