未触发 JQuery 下拉列表/选择 onchange 事件答案

【问题标题】：JQuery dropdownlist/select onchange event not fired未触发 JQuery 下拉列表/选择 onchange 事件
【发布时间】：2020-11-25 16:30:06
【问题描述】：

我在 asp.net 表单中有这个下拉列表/组合框/选择元素：

<asp:DropDownList 
 ID="_ddlMode" 
 runat="server" 
 AppendDataBoundItems="true" 
 ClientIDMode="Static" 
 CssClass="input_medium" 
 DataSourceID="_sdsModes" 
 DataTextField="description" 
 DataValueField="id">
 <asp:ListItem Selected="True" Text="None" Value="" />
</asp:DropDownList>

当用户更改所选元素时，我需要调用函数SetModes()。我试过这个：

 $(function () {
   $(document.body).on('change', '_ddlMode', function () {
       var _index = $("select[id='_ddlMode'] option:selected").index();
       SetModes(_txtBank, _txtZip, _index);
   });
 });

没有运气。然后我尝试了这个：

 $(function () {
    _ddlMode= $("input[id$='_ddlMode']");

    _ddlMode.change(
        function () {
           var _index = $("select[id='_ddlMode'] option:selected").index();
           SetModes(_txtBank, _txtZip, _index);
        }
    );
});

再次没有运气......错误在哪里？在事件处理中检索所选元素的索引是否有更有效的方法？

附：我正在使用jquery-.2.1.3，jquery-ui-1.11.2

【问题讨论】：

$(document.body).on('change', '_ddlMode', -> $(document.body).on('change', '#_ddlMode', 或 $(document.body).on('change', "select[id='_ddlMode']", 因为你在下一行有这个，暗示你可能多次使用同一个 ID。

标签： javascript jquery asp.net

【解决方案1】：

因此，您愿意在javascript 代码中使用一个方法，但它对您不起作用。为什么它没有击中它可能有很多原因，我会在这里写一些可能的原因以及它们各自可能的解决方案。

原因：
由于您使用 jQuery 将下拉列表与更改事件绑定，我会怀疑您的 jQuery 是否被正确引用。

解决方案：
转到浏览器的开发工具的console 选项卡（CTRL + SHIFT + I），看看是否有没有加载 jQuery 的错误，如果是则修复它。

原因：
正如@freedomn-m 在 cmets 中指出的那样，在绑定事件时，您没有在 id 之前指定 css 选择器，在您的情况下是 #。

解决方案：

$(function () {
   $(document.body).on('change', '#_ddlMode', function () {
       var _index = $("select[id='_ddlMode'] option:selected").index();
       SetModes(_txtBank, _txtZip, _index);
   });
 });

原因：
您的事件未绑定到所需的控件。这对于ASP.NET Web 表单可能非常具体，因为您可以在构建 Web 应用程序时面对它。

因此，从技术上讲，ASP.NET 可以在您编译控件时修改它们的 ID，这可能是未点击该方法的原因。

例如，如果您有一个 ContentPlaceHolder 和 cph_1 的 id 并在其中将标记作为您的子页面，那么 ASP.NET 将把该 id 与您的每个嵌套服务器控件连接起来。因此，如果您在该内容占位符中有一个 id 和 tb1 的 textbox，则在浏览该页面时它将被修改为 cph1_tb1。

解决方案：
借助此语法 (<%%>) 绑定您的事件，如下所示：

$(function () {
   $(document.body).on('change', '#<%= _ddlMode.ClientID %>', function () {
       var _index = $("select[id='<%= _ddlMode.ClientID %>'] option:selected").index();
       SetModes(_txtBank, _txtZip, _index);
   });
 });

看看，如果你能用这些解决方案解决问题。

【讨论】：

# 是关键！ :-)