Onchange event using selecttouislider

Question

I mean

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

and hardly retrieves the selected value on the slider. Initially, I had a dropdown menu with the onchange event associated with it. and worked like a charm by calling

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

but now the requirement has 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 using

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

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

the drop-down list is as follows:

 <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> <option value="60">txt5</option> </select> 

It would be great if I could just fire the onchange event in the selection window, but it seems that when using the slider, the value of the drop-down list changes, but it does not raise the event.

Any help really appreciated!

thanks

Answer 1

The event you are in is a UI slider, not a <select> ... but the <select> value is already updated, so just select this:

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

Answer 2

I just stumbled upon the same problem where I needed to get a new value if Slider OR Select Drop down, where it was changed, but the “stop” option does not work when I used selection highlighting. Therefore, I used the "change" sliderOptions option with a function. So, like Nick 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()); } } });