Sort shuttle values using jQuery

I have previously blog about Shuttle sides label and hide sort buttons with jQuery.

Here is how you can enhance side labels to sort shuttle values.

If you are on APEX 3.x you need load jQuery library on page HTML header.

Add to page HTML header:

<script type="text/javascript">
(function($){
 $.fn.sortSelectOptions=function(pOrder){
  return this.each(function(i){
   var self=$(this);
   var options=self.children("option").detach();
   options.sort(function(a,b){
    a=a.firstChild.nodeValue; 
    b=b.firstChild.nodeValue;
    if(a==b){
     return 0;
    } 
    if(pOrder=="desc"){
     return (a<b)?1:-1; 
    }
    return (a>b)?1:-1; 
   });
   self.append(options);
  });
 }
})(jQuery);
</script>

Code for sorting option values are taken from rickyrosario blog.

Then add to your shuttle item Post Element Text:

<script type="text/javascript">
$(function(){
 $("<div/>",{
  "class":"fielddatabold",
  "css":{"cursor":"pointer"},
  "text":"Not Selected"
 })
 .insertBefore("##CURRENT_ITEM_NAME#_LEFT")
 .append(
  $("<img/>",{
   "css":{"vertical-align":"middle"}
  })
  .attr({
   "title":"Sort Descending",
   "alt":"Sort Descending",
   "src":"#IMAGE_PREFIX#ws/ddown.gif"
  })
 )
 .toggle(
  function(){
   $("##CURRENT_ITEM_NAME#_LEFT").sortSelectOptions("desc");
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/dup.gif",
    "title":"Sort Ascending",
    "alt":"Sort Ascending"
   });
  },function(){
   $("##CURRENT_ITEM_NAME#_LEFT").sortSelectOptions();
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/ddown.gif",
    "title":"Sort Descending",
    "alt":"Sort Descending"
   });
  }
 );

 $("<div/>",{
  "class":"fielddatabold",
  "css":{"cursor":"pointer"},
  "text":"Selected"
 })
 .insertBefore("##CURRENT_ITEM_NAME#_RIGHT")
 .append(
  $("<img/>",{
   "css":{"vertical-align":"middle"}
  })
  .attr({
   "title":"Sort Descending",
   "alt":"Sort Descending",
   "src":"#IMAGE_PREFIX#ws/ddown.gif"
  })
 )
 .toggle(
  function(){
   $("##CURRENT_ITEM_NAME#_RIGHT").sortSelectOptions("desc");
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/dup.gif",
    "title":"Sort Ascending",
    "alt":"Sort Ascending"
   });
  },function(){
   $("##CURRENT_ITEM_NAME#_RIGHT").sortSelectOptions();
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/ddown.gif",
    "title":"Sort Descending",
    "alt":"Sort Descending"
   });
  }
 );

});
</script>

Check also relating post in OTN forum.