HTML <select> JQuery .change 不起作用

Posted 2023-03-11

【中文标题】HTML <select> JQuery .change 不起作用

【英文标题】：HTML <select> JQuery .change not working

【发布时间】：2012-06-28 07:03:07

【问题描述】：

好吧，我不明白为什么这不起作用。看起来很简单。

这是我的下拉菜单：

<div>
    <form>
        <select id='yearDropdown'>
            <c:forEach var="years" items="$parkYears">
                <option value=/events.html?display_year=$years<c:if test="$currentYear == years">selected="selected"</c:if>>$years</option>
            </c:forEach>
        </select>
    </form>
</div>

这里是 javascript

$("#yearDropdown").change(function () 
    alert('The option with value ' + $(this).val());
);

现在我只想让它工作，这样我就可以添加功能。谢谢！

【问题讨论】：

控件的渲染输出是什么（查看源代码、检查元素等...）？

原谅我，我不知道你在问什么。我是一名CS学生。而且我几乎不了解javascript

与其说“没用”，不如告诉我们到底发生了什么？你没有得到任何警报，好的，明白了。但是你的控制台有没有说什么？您是否正确加载了 jQuery？这个javascript事件的上下文是否在$(function() );调用中？

这到底是为什么被否决了？这是一个非常合理且表述清楚的问题。

关于接受的答案，如果您使用的是 jQuery 1.6.x 或更早版本，请确保使用 delegate 而不是 live 和 on() 而不是 live() v1.7，因为live() 的许多缺点。更多细节在这里：***.com/a/11148053/448144

【参考方案1】：

该代码在语法上是正确的。很可能是在错误的时间运行它。

当 DOM 准备好时，您需要绑定事件：

---

原生 JS/DOM

window.addEventListener('DOMContentLoaded', () => 
    const yearDropDown = document.getElementById('yearDropdown');
    yearDropDown.addEventListener('change', () =>  
        alert(yearDropDown.value)
    );
);

---

jQuery

$(function() /* DOM ready */
    $("#yearDropdown").change(function() 
        alert('The option with value ' + $(this).val());
    );
);

或者，使用live：

$("#yearDropdown").live('change', function() 
    alert('The option with value ' + $(this).val());
);

或者，使用delegate：

$(document.body).delegate('#yearDropdown', 'change', function() 
    alert('The option with value ' + $(this).val());
);

或者，如果你使用 jQuery 1.7+:

$("#yearDropdown").on('change', function() 
    alert('The option with value ' + $(this).val());
);

---

不过，通常最好在浏览器完成渲染标记后执行脚本。

【讨论】：

没关系，因为.change 将应用于每个新添加的元素。 （如有不妥请指正）

@Derek：你错了，它适用于匹配表达式 (#yearDropdown) 的元素在该行执行的那一刻。 jQuery 不监视新元素或类似的东西。

@user1469925 不同之处在于，该函数在文档加载完成后调用，并且 DOM 已创建。您的代码在读取后立即执行，并且 DOM 可能尚未准备好 - 选择尚不存在。

感谢您的解释，我想我需要阅读 DOM。就像我说的那样，我是一名 CS 学生，实习有点过头了。不过很有趣！

如果你使用 jQuery pre 1.7，不要使用live，而是使用delegate。此外，live 主要用于当您想要绑定到动态注入元素时。这就是 on() 现在的样子，因为 live 有很多缺点，请参阅此处了解更多详细信息：***.com/a/11148053/448144

【参考方案2】：

我已经试过你的代码in jsFiffle。 我手动添加了一些年份作为选项。 它工作正常。

只需在 $(document).ready 中绑定 .change 事件即可：

$(document).ready(function()
  $("#yearDropdown").change(function () 
      alert('The option with value ' + $(this).val());
  );​
);

【参考方案3】：

您的代码是正确的并且对我有用，请参见此处：http://jsfiddle.net/mobweb/2Skp9/

你确定 jQuery 已经正确加载了吗？

【参考方案4】：

不确定这是否有帮助，但你可以试试这个：

    $("#yearDropdown").live("change", function () 
    alert('The option with value ' + $(this).val());
);

【讨论】：

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

是吗？我猜需要阅读发行说明。感谢您的信息。