selectToUISlider setting value incorrectly

Question

I have a standard <select>..</select> element with which I have a slider created by selectToUISlider() The problem is that when the slider moves the option in the dropdown does not change. Additionally it sets selected="selected" on each element as the slider is moved so that when the form is submitted multiple values are POSTed emulating a multiple select option.

I've spent ages trying to get to the bottom of this but no luck. Does anyone have any ideas?

score 1 · Accepted Answer · answered Aug 03 '12 at 00:47

I came across the same problem when trying to achieve similar functionality as mentioned by you.

The problem is whenever a slider is moved it keeps setting the "selected" attribute of the select list without clearing up previously selected item. I have added a script to clear previously selected option items before setting the new one as selected.

Look/search for the text at line number 92(..ish) of the jquery script file.

   //control original select menu
   var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
   currSelect.find('option').eq(ui.value).attr('selected', 'selected');

and insert this code between 2 lines...

   currSelect.find('option[selected]').removeAttr('selected');

so final code should look like this...

   //control original select menu
   var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
   currSelect.find('option[selected]').removeAttr('selected');
   currSelect.find('option').eq(ui.value).attr('selected', 'selected');

I hope it helps. Feel free to ask any further question.

Perhaps you should file a bug report? – Robin Elvin Sep 14 '12 at 12:37 — Robin Elvin, Sep 14 '12 at 12:37

score 1 · Answer 2 · edited May 23 '17 at 12:09

I know this is quite old but I recently stuggled with this and maybe my solution helps someone. I had this same problem when using more recent versions of jQuery (>jQuery 1.6.1) and JQueryUI and trying to use selectToUISlider with them.

I found my solution (using properties insted of attributes) just replacing in the selectToUISlider.js script, in line 98

This

currSelect.find('option').eq(ui.value).attr('selected', 'selected');

for this

currSelect.find('option').eq(ui.value).prop('selected', true);

You can find the "Why" on this answer, which helped me to find this solution: https://stackoverflow.com/a/5876747/2285806

You can read also the jQuery API entry for prop() to find more information and read important notes on browser backwards compatibility: http://api.jquery.com/prop/

selectToUISlider setting value incorrectly

2 Answers2