需要捕获 <select> 更改事件，当它以编程方式更改时答案

【问题标题】：Need to catch <select> change event, when it changes programmatically需要捕获 <select> 更改事件，当它以编程方式更改时
【发布时间】：2011-02-11 09:34:07
【问题描述】：

我在页面上有一个选择，它使用Filament's Group selectToUISlider 转换为滑块。

页面上的另一个脚本附加到表单元素的 onchange 事件。每次用户更改某些内容时，它都会重新计算结果。

现在问题出在 - 当您使用滑块时，<select> 不会触发 onChange 事件，因为使用插件更改了 <select> 值。

这是说明问题的小提琴：http://jsfiddle.net/t3aMe/

有没有办法监控选择的selectedIndex 的变化？或者也许有办法插入jQuery.val() 函数以使其成为trigger('change')？

【问题讨论】：

标签： jquery events

【解决方案1】：

我想你可以覆盖val 函数：

(function ($) {
  var val = jQuery.fn.val;

  jQuery.fn.val = function () {
    var result = val.apply(this, arguments);

    if (arguments.length) {  // e.g if this is a "set" rather than a get
      this.filter('select').trigger('change');
    };

    return result;
  };
}(jQuery));

不过，这将为页面中的所有选择元素触发change 事件。您可以添加大量 hack：

if (arguments.length) {  // e.g if this is a "set" rather than a get
  this.filter('select#select_test').trigger('change');
};

工作小提琴：http://jsfiddle.net/t3aMe/2/

【讨论】：

嘿，马特，你的解决方案很棒。没想到“扩展”.val() 这么简单

【解决方案2】：

只需在选择元素上触发更改事件：

$('#select_test').trigger('change');

在您的示例代码中：

（函数（$）{ $('#select_test').change(function() { $('#debug').text('onChange: 新值：' + $(this).val()); }); $('#change_select').click(function(e) { e.preventDefault(); var newv = parseInt($('#select_test').val()) + 1; $('#select_test').val(newv > 3 ? newv - 3: newv); $('#select_test').trigger('change'); }); })(jQuery);

【讨论】：

是的，我知道.trigger()，问题是.val()在插件内部被调用，我正在寻找不需要我修改它的解决方案。
我明白了，我认为你最好的选择是修改插件。或者你可以像马特的第二个答案一样覆盖 jquery val。