Onchange event using selecttouislider

I am referring to

http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support

and having hard time retrieving the selected value on the slider. Initially I was having a dropdown which had an onchange event associated with it.. and worked like a charm by calling

 <select id="myselect" onchange="myfunction(this);" >

but now requirement changed to a slider

 $('select#myselect').selectToUISlider({sliderOptions: {stop: function(e,ui) {alert(this.val());}}});

it throws me this.val() is not a function.

I also tried to use

$('select#myselect').selectToUISlider({sliderOptions: {stop: function(e,ui) {alert(ui);}}});

but using the ui argument also I could not retrieve the selected value... it just returns me the selected index.

the dropdown looks lke this

<select name="myselect" id="myselect">
            <option value="20">txt1</option>
            <option value="30">txt2</option>
            <option value="40" selected="selected">txt3</option>
            <option value="50">txt4</option>
            <opti开发者_如何学Goon value="60">txt5</option>
        </select>

It would be excellent if I could just be able to trigger the onchange event of the select box but looks like when using the slider, the value of the dropdown changes but it does not trigger the event.

Any help is really appreciated!

Thanks

The event you're on is the UI slider, not the <select>...but the <select> value is already updated, so just fetch that, like this:

$('#myselect').selectToUISlider({
  sliderOptions: {
    stop: function(e,ui) {
      var currentValue = $('#myselect').val();
    }
  }
});

I just stumbled upon this same issue where I needed to get the new value if the Slider OR Select Drop down where changed, but the 'stop' option wouldn't work when I used the selection drop down. So I just used the sliderOptions 'change' option with a function. So just like Nick's Answer but like this:

$("select").selectToUISlider({
    // labels and tooltipSrc are selectToUISlider specific options
    labels: 0,
    tooltipSrc: "value",
    sliderOptions: {
        // swapped out stop for change here
        change: function(e,ui) {
            console.log($('select').val());
        }
      }
});