51%의 가능성 :: select option Add/Remove

select option Add/Remove

FrameWork/jQuery 2012/02/09 18:26

상황 : 오른쪽 셀렉트 박스는 데이터베이스에서 부서 정보를 가져온다. '<' 버튼을 통해 왼쪽 셀렉트 박스에 넣은 부서는 현재 등록하는 앱을 사용할 수 있는 권한을 갖게 된다. 고로 셀렉트 박스 간 데이터 이동 예제이다~

왼쪽 셀렉트 박스 : IN_CategoryIds

오른쪽 셀렉트 박스 : Category_Data

'<' 버튼 : addDept

'>' 버튼 : rmvDept

내가 생각한 허접한 코드

var dataValue = null;
var dataText = null;
var inValue = null;
var inText = null;

$("#Category_Data").click(function() {
dataValue = $("#Category_Data > option:selected").val();
dataText = $("#Category_Data > option[value=" + dataValue + "]").text();
});

$("#IN_CategoryIds").click(function() {
inValue = $("#IN_CategoryIds > option:selected").val();
inText = $("#IN_CategoryIds > option[value=" + inValue + "]").text();
});

$("#addDept").click(function() {
  $("#IN_CategoryIds").append("<option value='" + dataValue + "'>" + dataText + "</option>");
  $("#Category_Data").find("option:contains(" + dataText + ")").remove();
});

$("#rmvDept").click(function() {
  $("#Category_Data").append("<option value='" + inValue + "'>" + inText + "</option>");
  $("#IN_CategoryIds").find("option:contains(" + inText + ")").remove();
});

구글링해서 멋진 코드를 적용하니...

$("#addDept").click(function() {
  $("#Category_Data > option:selected").each(function(){
   $("#IN_CategoryIds").append($(this).clone());
   $(this).remove();
  });
});

$("#rmvDept").click(function() {
  $("#IN_CategoryIds > option:selected").each(function(){
   $("#Category_Data").append($(this).clone());
   $(this).remove();
  });
});

멋쟁이 같으니.

그나저나 명절에 뭐하는 짓일까.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'FrameWork > jQuery' 카테고리의 다른 글

jquery selectbox option 순서 이동 (0)	2012/02/10
Easy Widgets를 이용한 정렬 순서 수정 (0)	2012/02/09
select option Add/Remove (0)	2012/02/09
jQuery Display 메서드 (0)	2011/09/20
jQuery의 json을 사용할때 유용한 PHP함수 (0)	2009/12/02
JQuery 사용 하기..[라디오 버튼] (0)	2009/11/30