jQuery prevent change for select

Question

I want to prevent a select box from being changed if a certain condition applies. Doing this doesn't seem to work:

$('#my_select').bind('change', function(ev) {   if(my_condition)   {     ev.preventDefault();     return false;   } }); 

I'm guessing this is because by this point the selected option has already changed.

What are other ways of doing this?

Answer 1

Try this:

http://jsfiddle.net/qk2Pc/

var my_condition = true; var lastSel = $("#my_select option:selected");  $("#my_select").change(function(){   if(my_condition)   {     lastSel.prop("selected", true);   } });  $("#my_select").click(function(){     lastSel = $("#my_select option:selected"); }); 

Answer 2

In the event someone needs a generic version of mattsven's answer (as I did), here it is:

$('select').each(function() {     $(this).data('lastSelected', $(this).find('option:selected')); });  $('select').change(function() {     if(my_condition) {         $(this).data('lastSelected').attr('selected', true);     } });  $('select').click(function() {     $(this).data('lastSelected', $(this).find('option:selected')); });