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?

Answer 1

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.