Нужно поймать <select>событие изменения, когда оно изменяется программно

Question

У меня есть выборка на странице, которая преобразуется в слайдер с помощью Группа Filament selectToUISlider .

Другой скрипт на странице прикреплен к событиям onchange элементов формы. Каждый раз, когда пользователь что-то меняет, он пересчитывает результат.

Теперь вот проблема - событие onChange не запускается для <select> при использовании ползунка, поскольку значение <select> изменяется с помощью плагина.

Вот скрипка для иллюстрации проблемы: http://jsfiddle.net/t3aMe/

Есть ли способ отслеживать изменение 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));

Это вызовет событие 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_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);