从ASP.NET中引用jQuery中的下拉菜单

Question

这是一个新手问题。 我一直在使用jQuery一天左右。

我只想在下拉菜单中捕获每个更改。

这是我的下拉菜单和参考：

 <script src="Scripts/insertRootCauseElements.js" type="text/javascript"></script>
 <asp:DropDownList ID="DropDownListRootCause" runat="server" > </asp:DropDownList>

这是我的处理程序：

    $(document).ready(function () {

    //    var selectedValue = $('#DropDownListRootCause').selectedValue;
    //var selectedIndex = $('#DropDownListRootCause').selectedIndex;
    alert("HERE");
    $('#DropDownListRootCause').change(function () {
    alert("Changed " + $('#DropDownListRootCause').selectedIndex);
})
.change();
//    if ($('#DropDownListRootCause').change) {
//        alert("dd change " + selectedIndex);
//    }


})

我尝试了很多变化，但没有什么对我有用。 在调试时，似乎我的jQuery不知道“DropDownListRootCause”是什么。

我在我的dd控件中设置了AutoPostBack = true，它找到了我的jQuery但是

$('#DropDownListRootCause').change(function () {
    alert("Changed " + $('#DropDownListRootCause').selectedIndex);
})

仍然是虚假的。

我在调试时将DropDownListRootCause添加到'Watch'，显示'DropDownListRootCause'未定义'。 我试过双引号和单引号但没有运气。

它必须是简单的东西，但我看不到它。 有人可以帮忙吗？

Answer 1

如果您在源HTML中注意到，ASP.Net会更改ID。 很多时候，它最终会看起来像： $ctr001_DropDownListRootCause 。 这就是您的选择器无法正常工作的原因。

有两种方法可以正确选择您的select菜单：

1. $('[id$="DropDownListRootCause"]')这样做的属性以选择器结束 。
2. $('#<%=DropDownListRootCause.ClientID %>') ASP.Net会将完整的id写入您的选择器。 注意 ：只有在您的.aspx文件中包含javascript时才能使用此选项。 如果您尝试在.js文件中使用它，它将无法工作，因为ASP.Net在呈现页面时不会对这些文件执行任何操作。

此外，选择器的结尾可以修改为更具体：

$('select[id$="DropDownListRootCause"]')

编辑：

选择器的结尾有陷阱。 如果此select元素位于GridView行或Repeater ，则选择器将全部匹配。 假设你有这个GridView ：

<asp:GridView ID="gv"
    runat="server"
    AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:DropDownList ID="DropDownListRootCause" runat="server" ></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

（我已经从中移除了绒毛）它会生成看起来像这样的HTML：

<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$0&#39;)">
    <td>
        <select name="gv$ctl03$DropDownListRootCause" id="gv_DropDownListRootCause_0"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$1&#39;)">
    <td>
        <select name="gv$ctl04$DropDownListRootCause" id="gv_DropDownListRootCause_1"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$2&#39;)">
    <td>
        <select name="gv$ctl05$DropDownListRootCause" id="gv_DropDownListRootCause_2"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$3&#39;)">
    <td>
        <select name="gv$ctl06$DropDownListRootCause" id="gv_DropDownListRootCause_3"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$4&#39;)">
    <td>
        <select name="gv$ctl07$DropDownListRootCause" id="gv_DropDownListRootCause_4"></select>
    </td>
</tr>

同样，我已经删除了很多不需要的标记来显示我正在谈论的内容。 使用渲染的HTML，使用$('[id$="DropDownListRootCause"]')将选择5个 select元素。 如果您尝试将相同的事件代码连接到所有5个元素，那么您没问题。 但是，如果你只想用其中一个做某事，你需要让选择器更具体。