select option Add/Remove

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

 

 

왼쪽 셀렉트 박스 : 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();   });     });

 

멋쟁이 같으니.

 

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