Question

I have a select on a page, which is transformed into slider using Filament’s Group selectToUISlider.

Another script on a page is attached to onchange events of the form elements. Every time user changes something, it recalculates the result.

Now here’s the problem – onChange event doesn’t fire for <select> when you use the slider, since <select> value is changed using plugin.

Here’s the fiddle to illustrate the problem: http://jsfiddle.net/t3aMe/

Is there a way to monitor a change in selectedIndex of a select? Or maybe there’s a way to plug into jQuery.val() function to make it trigger('change')?

Answer 1

I suppose you could overwrite the val function:

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

This will trigger the change event for alll select elements in the page, though. You could add a massive hack:

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

Working fiddle: http://jsfiddle.net/t3aMe/2/