javascript - Resize event on multiple select control -

i have multiple select html element. want catch resize event, can store latest value.

<select multiple="multiple" class="ra-multiselect-collection" style="resize: vertical; margin-top: 0px; margin-bottom: 5px; height: 527px;"></select> 

the following code doesnt work:

$('.ra-multiselect-collection').on( 'resize', function(){     alert('resized'); }); 

any ideas?

well, don't think can bind resize event dom element, check out:

$("select").on("mouseup", function() {     var el = $(this);      if (el.data("old-height") == null || el.data("old-height") != el.height())     {         alert("resized!");     }      el.data("old-height", el.height()); }).data("old-height", $("select").height()); 

fiddle

i have used mouseup event checking old height stored in data property current height on moment of event. if different, resize event. not pretty beautiful workaround, seems work.

i not test on ie because doesn't support property , on firefox, works nice seems can double-click resize corner , returns initial size , doesn't trigger event actually.

in case, you're using class select elements, can this:

$(".ra-multiselect-collection").each(function() {     $(this).on("mouseup", function()     {         var el = $(this);          if (el.data("old-height") == null || el.data("old-height") != el.height())         {             alert("resized!");         }          el.data("old-height", el.height());     }).data("old-height", $(this).height()); }); 

didn't tested should work.