Make jQuery UI Selectmenu "Not change" the value on 'change' event

Question

I am using the 'fnagel jQuery UI Selectmenu Widget' that you can find here. I want make the widget not select the new option when change event is fired based on some condition.

Usually this is accomplished by 'return false;' from the change event. But its not working. I have created a fiddle here.

Can some one please help me make the fiddle work by not selecting the value on change event?

Thanks!

Answer 1

You can manually save and revert the value, jsfiddle here.

1. Add a data attribute to your select element:

   ... data-prev-selected="1" ...

2. Use this code for the change event:

   var someCondition = true; // hardcoded for now
   
   // Undo new selection
   if ( someCondition ) {
       var prevIdx = $('select#speedA').attr('data-prev-selected');
       $('select#speedA').selectmenu("index", prevIdx);
       return;
   }
   
   // Save new index
   var idx = $('select#speedA').selectmenu("index");
   $('select#speedA').data('data-prev-selected', idx);