0

这是一个新手问题。我已经使用 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”未定义时，我将 DropDownListRootCause 添加到“Watch”。我试过双引号和单引号，但没有运气。

它一定很简单，但我看不到。有人可以帮忙吗？

4

1 回答 1

2

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

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

  1. $('[id$="DropDownListRootCause"]') 这是在做一个以 selector 结尾的属性。
  2. $('#<%=DropDownListRootCause.ClientID %>') ASP.Net 会将完整的 id 写到您的选择器中。 注意：您只能在您的 javascript 位于您的.aspx文件中时使用它。如果您尝试在.js文件中使用它，它将不起作用，因为 ASP.Net 在呈现页面时不会对这些文件做任何事情。

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

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

编辑：

选择器的末端有陷阱。如果此select元素在GridView一行或 a内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 个元素，那很好。但是，如果你想只用其中一个来做某事，你需要使选择器更具体。

于 2012-10-19T16:46:45.993 回答