Problem with Multi Select Move Up/Down in IE7

Problem with Multi Select Move Up/Down in IE7

Hi,

I am trying to write a multi select listbox where you can reorder the items in it by pressing "up" or "down" button.

It seems to be running fine on most browsers but not Internet Explorer 7 though. It seems that I am not able to move the second item to the first, but if you move your mouse over to the listbox immediately after clicking the "up", the second item will move to the first. The same applies if you select multiple items and move up/down. You need to mouse over to the listbox immediately after clicking.

Here's my code:
  1. <html>
    <head>
        <title>test</title>
        <script src="JQuery-1-4.js" type="text/javascript"></script>
        <script type="text/javascript">
            function ReorderFields(actionType, listBoxCtrl) {
                if (actionType == 'up') {
                    ListBoxMoveUp(listBoxCtrl);
                }
                else if (actionType == 'down') {
                    ListBoxMoveDown(listBoxCtrl);
                }
            }

            function ListBoxMoveDown(ctrl) {
                var selectedDx = $("#" + ctrl).find("option:selected");
                var next = selectedDx.last().next();

                selectedDx.each(function() {
                    $(this).insertAfter(next);
                });
            }

            function ListBoxMoveUp(ctrl) {
                var selectedDx = $("#" + ctrl).find("option:selected");
                var prev = selectedDx.first().prev();

                selectedDx.each(function() {
                    $(this).insertBefore(prev);
                });
            }
        </script>
    </head>
    <body>
            <select id="lstFields" name="lstFields" size="10" multiple="multiple">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>
            <br />

            <input type="button" value="Up" onclick="ReorderFields('up', 'lstFields');return false;" />
            <input type="button" value="Down" onclick="ReorderFields('down', 'lstFields');return false;" />
    </body>
    </html>

















































Hopefully you are able to simulate my problem.

Please let me know if you need more information.

Thank you very much in advance.