In this article I will explain with an example, how to move selected Items to Top of ListBox using jQuery.
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 jQuery.
 
 
Moving Selected Items to Top of ListBox using jQuery
The ListBox has been assigned a jQuery OnClick event handler.
Inside the OnClick event handler, 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 jQuery.
<select id="lstFruits" multiple="multiple" style="height: 95px">
    <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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#lstFruits", function () {
        var lst = $(this);
        var selected = new Array();
        lst.find("OPTION").each(function () {
            if ($(this).is(":selected")) {
                selected.push($(this));
                $(this).remove();
            }
            $(selected).each(function () {
                lst.prepend($(this));
            });
        });
    });
</script>
 
 
Screenshot
Move Selected Items to Top of ListBox using jQuery
 
 
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
View Demo
 
 
Downloads
Download Code