javascript selectbox up down
jquery 이용해서 처리
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
if(!console){
var console = {
log:function (){
var log = new Array();
for (var key in arguments){
log.push(arguments[key]+'\n');
}
var l = $('#consolelog');
if(l.length !=0 ){
$('#consolelog').val(log.join(''));
}else{
alert(log.join(''))
}
}
}
}
$(document).ready(function (){
fnInit();
})
function fnInit(){
}
function userPortletMove(type){
var selector = '#selecboxMove';
var selectObj = $(selector);
if(!selectObj.val()) return ;
var selectLen = selectObj.val().length;
if( selectLen < 1 ) return ;
if(type=='up'){
var selectIdx = $(selector+" option").index($(selector+" option:selected"));
if(selectIdx==0) return ;
var beforeObj = $(selector+" option:eq("+(selectIdx-1)+")");
var innerObj = beforeObj.clone().wrapAll('<div/>').parent().html();
beforeObj.remove();
$(selector+' option:eq('+(selectIdx+selectLen-2)+')').after(innerObj);
}else{
var selectIdx = $(selector+" option").index($(selector+" option:selected"));
if(selectIdx+selectLen==$(selector).children().length) return ;
var nextObj = $(selector+" option:eq("+(selectIdx+selectLen)+")");
var innerObj = nextObj.clone().wrapAll('<div/>').parent().html();
nextObj.remove();
$(selector+' option:eq('+(selectIdx)+')').before(innerObj);
}
}
</script>
</HEAD>
<BODY>
<div class="panel-body">
<select id="selecboxMove" class="select100per" size="10" style="width:100px;" multiple="">
<option value="aa">aaa</option>
<option value="bb">bbb</option>
<option value="cc">ccc</option>
<option value="dd">ddd</option>
</select>
<div>
<span class="pull-right">
<button type="button" onclick="userPortletMove('up')" class="btn btn-info portlet-up-btn">위</button>
<button type="button" onclick="userPortletMove('down')" class="btn btn-info portlet-down-btn">아래</button>
</span>
</div>
</div>
<textarea id="consolelog" style="width:100%" rows="3"></textarea>
</BODY>
</HTML>