Question

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

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

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

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

Answer 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));

但是，这将触发页面中的alll select元素的change事件。你可以添加一个大规模的黑客攻击：

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/

Answer 2

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

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

在您的示例代码中：

(function($) {
    $('#select_test').change(function() {
        $('#debug').text('onChange: new value: ' + $(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);

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

2 个答案: