In this article I will explain with an example, how to move selected Items to Top of ListBox using JavaScript.
When an Item (Option) is selected in the ListBox, it will be removed from the List and again added to the ListBox at 0th Index (First Position) using JavaScript.
 
 
Moving Selected Items to Top of ListBox using JavaScript
The ListBox has been assigned OnClick event handler. When an Item (Option) is selected in the HTML ListBox, the MoveToTop JavaScript function is called.
Inside the MoveToTop JavaScript function, a loop is executed over the Items (Options) of the ListBox and the selected Items (Options) are removed from ListBox and added into a JavaScript Array.
Finally, a loop is executed over the JavaScript Array and the selected Items (Options) are added to the ListBox at 0th Index (First Position) using JavaScript.
<select id="lstFruits" multiple="multiple" style="height: 95px" onclick="MoveToTop(this)">
    <option value="1">Mango</option>
    <option value="2">Apple</option>
    <option value="3">Banana</option>
    <option value="4">Pineapple</option>
    <option value="5">Orange</option>
    <option value="6">Lemon</option>
    <option value="7">Guava</option>
</select>
<script type="text/javascript">
    function MoveToTop(lst) {
        var selected = new Array();
        var options = lst.getElementsByTagName("OPTION");
        for (var i = 0; i < options.length; i++) {
            if (options[i].selected) {
                selected.push(options[i]);
                lst.removeChild(options[i]);
            }
        }
        for (var i = 0; i < selected.length; i++) {
            lst.insertBefore(selected[i], options[0]);
        }
    };
</script>
 
 
Screenshot
Move Selected Items to Top of ListBox using JavaScript
 
 

Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads