html - Move Selected Item to Top of Listbox using javascript using Javascript

Question

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>
      </apex:repeat>
  </select>

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) {
          return;
        }
        else {
            listBox.insertBefore(listBox.options[0],
                listBox.options[listBox.selectedIndex]);
          }
}

question from:https://stackoverflow.com/questions/65886446/move-selected-item-to-top-of-listbox-using-javascript-using-javascript

Answer 1

Try this, hope it helps you

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