Skip to content

Move Selected Item to Top of Listbox using javascript using Javascript

I have bind listbox using apex. Below is my code

 <select id="{!$Component.multiselectPanel}:rightList"
          class="multilist" multiple="multiple" size="{!size}"
          style="width: {!width};">
      <apex:repeat value="{!rightOptions}" var="option">
          <option value="{!option.value}">{!option.label}</option>

When I click on Top Button that time Selected Item move on top. For Example, In below Image when I clicked on top button that time ‘Location’ text become first then ‘Demo Site’ and other values are shown in listbox.


Here, I also put my JavaScript code for reference :

function(idList, idHidden) {
        listBox = document.getElementById(idList);
        var len = listBox.options.length;
        if (len > 0 && listBox.options[0].selected == true) {
        else {

How can we achieve this?


Try this, hope it helps you

listBox.insertBefore(listBox.options[listBox.selectedIndex], listBox.childNodes[0]);