jquery select 목록 양방향 선택 예시 코드 만들기

jquery에서 제작한 select 목록 양방향 선택, 호환성 틀림없이 괜찮을 거예요. 필요하신 분들은 배워보세요.

aaaaaaaaaaa
bbbbbbbbbbb
ccccccccccc
ddddddddddd
eeeeeeeeeee
>>
>
<
<<
fffffffffff

$(function(){
$("#sel_left,#sel_right").bind("change",checkBtn);
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
checkBtn();
});

function checkBtn(){
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");
}

function clickBtn(e){
if("btn_1"== e.target.id){
jQuery("#sel_left>option").appendTo("#sel_right");
}else if("btn_2"== e.target.id){
jQuery("#sel_left option:selected").appendTo("#sel_right");
}else if("btn_3"== e.target.id){
jQuery("#sel_right option:selected").appendTo("#sel_left");
}else if("btn_4"== e.target.id){
jQuery("#sel_right>option").appendTo("#sel_left");
}
checkBtn();
}