<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
// Multiple 형태의 Select Element의 순서를 바꾼다.
// 예) moveItem('위치', 'Select Element ID')
function moveItem(goto, elementId) {
var element = document.getElementById(elementId); // Multiple Select Element
var selIndex = element.selectedIndex; // Selected Index
var elementLength = element.options.length; // Select Element Item Length
var selText = element.options[selIndex].text; // Selected Item Text
var selValue = element.options[selIndex].value; // Selected Item Value
if(selIndex < 0) {
alert("선택해 주세요.");
return;
}
if(goto == "top") { // 최상위로 이동
var index = selIndex;
while(index > 0) {
element.options[index].text = element.options[index-1].text;
element.options[index].value = element.options[index-1].value;
index--;
}
element.options[0].text = selText;
element.options[0].value = selValue;
element.selectedIndex = 0;
} else if(goto == "up") { // 위로 이동
if(selIndex-1 < 0) return;
var oldText = element.options[selIndex-1].text;
var oldValue = element.options[selIndex-1].value;
element.options[selIndex-1].text = selText;
element.options[selIndex-1].value = selValue;
element.options[selIndex].text = oldText;
element.options[selIndex].value = oldValue;
element.selectedIndex = selIndex-1;
} else if(goto == "down") { // 아래로 이동
if(selIndex+2 > elementLength) return;
var oldText = element.options[selIndex+1].text;
var oldValue = element.options[selIndex+1].value;
element.options[selIndex+1].text = selText;
element.options[selIndex+1].value = selValue;
element.options[selIndex].text = oldText;
element.options[selIndex].value = oldValue;
element.selectedIndex = selIndex+1;
} else if(goto == "bottom") { // 최하위로 이동
var index = selIndex;
while(index < elementLength-1) {
element.options[index].text = element.options[index+1].text;
element.options[index].value = element.options[index+1].value;
index++;
}
element.options[element.options.length-1].text = selText;
element.options[element.options.length-1].value = selValue;
element.selectedIndex = element.options.length-1;
} else return;
}
</script>
<BODY>
<select name="rssItem" id="rssItem" multiple="multiple" size="10">
<option value="11111">첫번째</option>
<option value="22222">두번째</option>
<option value="33333">세번째</option>
<option value="44444">네번째</option>
<option value="55555">다섯번째</option>
</select>
<input type="button" value="맨위로" onclick="moveItem('top', 'rssItem')" />
<input type="button" value="위로" onclick="moveItem('up', 'rssItem')" />
<input type="button" value="아래로" onclick="moveItem('down', 'rssItem')" />
<input type="button" value="맨아래로" onclick="moveItem('bottom', 'rssItem')" />
</BODY>
</HTML>
'프로그래밍 > JavaScript' 카테고리의 다른 글
| Web에서 App실행하는 Javascript (0) | 2012.06.15 |
|---|---|
| 셀렉트 박스 사이의 항목이동 및 순서변경 (0) | 2012.02.09 |
| jquery.validator 정리 (0) | 2012.01.27 |
| 이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3) (0) | 2011.05.20 |
| [스크립트] Prototype + jQuery + Sly 를 적절히 섞어 쓰기 (0) | 2010.11.09 |