jquery :: select box 간 option 이동

js_selectmultiple.html

jquery-1.7.min.js

첨부된 파일을 참고하세요.
당연히 jquery 파일 인클루드는 필수!

var JSopt  =  {
 doOpt : function(_mode) {
  if(_mode == 'add') {  // >
    // sel_list : 왼쪽셀렉트박스 id
   $("#sel_list").find("option").each(function() {
    if(this.selected){
     // sel_list_sort : 오른쪽 셀렉트박스 id
     $("#sel_list_sort").append("<option value='" + this.value +"'>" + this.text +"</option>");
     $(this).remove();
    }
   });
  } else if (_mode == "addall") {   // >>
   $("#sel_list").find("option").each(function() {
    $("#sel_list_sort").append("<option value='" + this.value +"'>" + this.text +"</option>");
    $("#sel_list").empty();
   });
  } else if (_mode == "back") {   // <
   $("#sel_list_sort").find("option").each(function() {
    if(this.selected){
     $("#sel_list").append("<option value='" + this.value +"'>" + this.text +"</option>");
     $(this).remove();
    } else {
    }
   });
  } else if (_mode == "backall") {   // <<
   $("#sel_list_sort").find("option").each(function() {
    $("#sel_list").append("<option value='" + this.value +"'>" + this.text +"</option>");
    $("#sel_list_sort").empty();
   });
  } else if (_mode == "up") {  // ↑
   //선택된 option의 index 반환
   var index = $("#sel_list_sort option").index($("#sel_list_sort option:selected"));
   if(index > 0)
    $("#sel_list_sort option:eq("+(index-1)+")").before($("#sel_list_sort option:eq("+index+")"));
  } else if (_mode == "down") {  // ↓
   var index = $("#sel_list_sort option").index($("#sel_list_sort option:selected"));
   if(index > 0)
    $("#sel_list_sort option:eq("+(index+1)+")").after($("#sel_list_sort option:eq("+index+")"));
  }
 }
}

스샷 이미지 

두 셀렉트박스 간에 option들의 위치를 이동하도록 구현하였습니다.