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

这是一个新手问题。我已经使用jQuery一天左右了

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

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

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

我尝试了很多变化，但都不适合我。在调试时，我的jQuery似乎不知道DropDownstrootCause是什么

我在dd控件中设置AutoPostBack=true，该控件查找jQuery，但

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

仍然评估为错误

我在调试时将dropDownstrootCause添加到“Watch”中，这表明“dropDownstrootCause”未定义。我试过双引号和单引号，但运气不好

---

一定很简单，但我看不出来。有人能帮忙吗？

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

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

$'[id$=DropDownstrootCause]'这是在执行一个。 $ASP.Net将把完整id写入选择器。注意：您只能在javascript位于.aspx文件中时使用此选项。如果您尝试在.js文件中使用此选项，它将不起作用，因为ASP.Net在呈现页面时不会处理这些文件。 此外，可以修改带有选择器的端点，使其更具体：

$'选择[id$=DropDownstrootCause]'

编辑：

选择器的末端存在陷阱。如果此select元素位于GridView行或中继器内，则选择器将匹配所有元素。假设您有这个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$=DropDownstrootCause]'将选择5个select元素。如果您试图将相同的事件代码连接到所有5个元素，那么就可以了。但是，如果您试图只使用其中一个来执行某些操作，则需要使选择器更加具体

你能提供一个例子吗？

<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>

<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>