JQuery - Selectbox 정렬(다중) / 순서바꾸기

 

 

 

HTML SelectBox에서 option객체의 순서를 바꾸는 문제는 정말 단골 질문중 하나다.

실제로 구글에 검색해보니 안나오면 이상할 정도로 많이 나온다.

 

보통 option을 정렬할 때 Selectbox 안 한 개의 option을 선택해서 위, 아래로 위치를 변경하는 기능을 많이 사용하나,

이번에는 option들의 객체가 많고, 다중 선택해서 option들의 위치(위, 아래)를 바꾸고 싶었다.

 

 

이 함수를 적용하기 전에 select객체에 'multiple' 속성을 넣는것을 잊지 말자.

https://www.w3schools.com/tags/att_select_multiple.asp

 

 

 

 

 

 

function up(){

 

              var selected = $j('#'+selectboxId+' option:selected'); <----- Selectbox의 객체 + 선택된 option을 구함. 

 

              if(selected[0].previousElementSibling == null) return; <----- 선택된 옵션중 가장 첫번째 옵션이 맨 위면 return.

 

             

 

              $j(selected).each(function(index, obj){

 

                    $j(obj).insertBefore($j(obj).prev());

// 1. insertBefore : 선택된 option의 앞(위치)에 삽입.

// 2. prev           : 선택된 option의 이전 요소를 반환

// 결과              : insertBefore자리(위치)에 prev의 반환값이 삽입됨.

 

              });

 

};

 

 

 

function down(){

 

              var selected = $j('#'+selectboxId+' option:selected'); <----- Selectbox의 객체 + 선택된 option을 구함. 

 

              if(selected.last().next().length == 0) return;              <----- 선택된 옵션중 가장 마지막 옵션이 맨 아래면 return.

 

             

 

              $j(selected.get().reverse()).each(function(index, obj){   <----- 선택된 옵션을 reverse함.(선택된 순서를 거꾸로 함.)

$j(obj).insertAfter($j(obj).next());

// 1. insertAfter : 선택된 option의 뒤(위치)에 삽입.

// 2. next         : 선택된 option의 다음 요소를 반환

 

// 결과            : insertAfter 자리(위치)에 next의 반환값이 삽입됨.

 

              });

 

};

 

 

 

 

 

참고자료. insertAfter : 

http://api.jquery.com/insertafter/

insertBefore : http://api.jquery.com/insertBefore/

prev : http://api.jquery.com/prev/

next : http://api.jquery.com/next/

get(reverse) : https://api.jquery.com/get/