jQuery - 检测是否选择了 HTML 选择选项的事件处理程序答案

【问题标题】：jQuery - event handler to detect if HTML select option has been selectedjQuery - 检测是否选择了 HTML 选择选项的事件处理程序
【发布时间】：2011-11-01 13:49:12
【问题描述】：

如何在 jQuery 中检测到 select 标签中的任何选项已更改？

例如[伪代码]：

event handler function -> option changed(){      
  //do some stuff
}

编辑：

我有以下选择：

<select id = "selectattribute">
  <OPTION VALUE="0">Choose Attribute</OPTION>
  <?php echo($options);?>
</select>

我正在 jQuery 中尝试这个：

$(document).ready(function() {
  $("#selectattribute").change(function() {
     alert('Handler for .change() called.');
  });
});

什么都没有发生……函数没有触发。

编辑：当我使用 $("#select") 而不是 $("#selectattribute")...can you not apply it to particular select tags? 时它可以工作

【问题讨论】：

您将侦听器附加到更改事件的选择元素。您可以使用 jQuery（或许多库中的任何一个）、几行纯脚本或内联处理程序。
@RobG：你真的不应该提出 inline-handler...
你试过不同的浏览器吗？
@Saxoier - 你真的不应该在没有为他们提供合理的技术理由的情况下在技术论坛上发表意见。
@RobG：你的高分和大多数标有“JavaScript”的答案你应该知道你不应该将 HTML 与内联 JS 和内联 CSS 混合，因为这些文件很难维护（区分内容和视觉介绍）。您可以在许多个答案中阅读它。

标签： javascript jquery html event-handling

【解决方案1】：

$("select").change(function() {})

【讨论】：

您需要查看 jquery 选择器的文档 $("select") 将选择所有 <select> 标记。 $("#select") 将选择所有具有 id='select' 属性的 dom 元素。要仅获取您想要的 select dom 元素，请在选择器中使用其 dom id

【解决方案2】：

来自jQuery docs regarding the change handler：

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

事件处理程序可以绑定到文本输入和选择框：

$('.target').change(function() {
  alert('Handler for .change() called.');
});

【讨论】：

您好，我看到并实现了它，但它不起作用……请参阅我编辑的帖子
它应该根据您在编辑中发布的代码工作。在此处的另一个答案中查看“Jon P”的小提琴链接。您发布的代码在隔离时有效。因此，您可能在页面的其余部分有其他东西弄乱了它——您可能必须发布整个页面的 HTML。您是否多次使用 id 名称？控制台中是否有任何 JavaScript 错误？

【解决方案3】：

您的代码可以在 Firefox 中使用鼠标运行，请参阅 this fiddle。

不过，使用键盘与this bug report 不同

为了解决这个问题，我添加了一个 key up 处理程序以从元素中移除焦点然后重新聚焦，如 this fiddle

如果使用鼠标时没有触发更改事件，请检查您的 php 代码呈现的选项。寻找可能“破坏”选择标签的结构。

【讨论】：

...相当可靠的答案。恭喜。

【解决方案4】：

尝试绑定：

  $("#selectattribute").bind('change', function() {
     alert('Handler for .change() called.');
  });

或在 jQUery 中更改函数：

  $("#selectattribute").change(
     function() {
        alert('Handler for .change() called.');
     }
  );

【讨论】：

【解决方案5】：

可能还有另一个标签，其id名为“selectattribute”。标签id应该是唯一的。如果有多个id，jQuery将使用第一个创建的。

【讨论】：

【解决方案6】：

您的 JQuery 好像没有加载，请先检查它是否已加载

    //case if mini jQueryis not used replace with window.jQuery
    if (window.$) {
    console.debug('jQuery is loaded ');
    } else {
    console.debug('jQuery is not loaded ');
    }

【讨论】：