Using jQuery to reorder select box - in IE 8, clicking on it after scrolls select box

I'm using jQuery to reorder a multiple select box with the following code:

function moveUpItem () {

$('#intCategoryID option:selected').each( function () {

$(this).insertBefore($(this).prev());

});

}

The box has about 50 entries and is 10 lines in height, so it is scrollable.

The problem is that when the user clicks on the select box after an item has been moved, it scrolls the box so that the item that was just moved is at the top of the box. The order hasn't changed, the box has just been scrolled. Unfortunately, this also means th开发者_运维问答at the entry they thought they were clicking on has now moved and a different entry has been selected.

The items don't move in Firefox. Any suggestions on how to keep the list from moving around in IE 8?

http://www.texotela.co.uk/code/jquery/select/

This is all I could find.

Try it out here:

http://jsbin.com/utomu3/edit

If you want to try out different ways of sorting you can trying to edit the code.

I know this one is a bit old, but I was trying to achieve the same thing so I recently built this jquery plugin.

http://fedegiust.github.io/selectReorder/

I tested on IE8, IE9, Chrome, FireFox and Opera.