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]()
Demo
Downloads
