티스토리 뷰
삽질하다가..
언젠가는 누군가는 한번은 도움이 되지 싶지 않나해서리 올려본다. ㅡㅡ;
셀렉트 박스에 있는 아이템들을 다중 선택한 상태에서 위아래로 이동하는 기능이다.
물론 한개만 이동도 된다.
<!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>
<BODY onload="docOnload()">
<script language=javascript>
<!--
var f;
function docOnload() {
f = document.form0;
}
var lastSelectedIndex = 0;
var selected = 0;
function moveUp() {
if (!checkSelected()) return false;
if (f.wglist.selectedIndex == 0) {
alert("더이상 위로 이동 할 수 없습니다.");
return false;
}
var obj = f.wglist;
for (var i=0; i < obj.length; i++) {
if (f.wglist.options[i].selected) {
obj.children(i).swapNode(obj.children(i-1));
}
}
}
function moveDown() {
if (!checkSelected()) return false;
if (lastSelectedIndex == f.wglist.length -1) {
alert("더이상 아래로 이동 할 수 없습니다.");
return false;
}
var obj = f.wglist;
for (var i= obj.length-1; i >= 0; i--) {
if (f.wglist.options[i].selected) {
obj.children(i).swapNode(obj.children(i+1));
}
}
}
function checkSelected() {
selected = 0;
for (var i=0; i < f.wglist.length; i++) {
if (f.wglist.options[i].selected) {
selected++;
lastSelectedIndex = i;
}
}
if(selected == 0) {
alert("이동할 데이터를 선택하여 주십시오.");
return false;
}
return true;
}
//-->
</script>
<form name=form0>
<select name=wglist multiple size=20>
<option>범석이바보</option>
<option>범석이못난이</option>
<option>범석이뱀</option>
<option>범석이구랭이</option>
<option>범석이게으름뱅이</option>
<option>범석이잠꾸러기</option>
<option>범석이공처가</option>
<option>범석이짱나</option>
<option>범석아한잔하재두</option>
<option>범석이차사빤스</option></select>
</form>
<input type=button value="△" class="button" style="width:50px;" onclick="moveUp();">
<input type=button value="▽" class="button" style="width:50px;" onclick="moveDown();">
</BODY>
</HTML>
'프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] 코사인, 사인 함수 사용으로 구현한 라인 그리기 (0) | 2008.06.22 |
|---|---|
| [Javascript] 달력소스 (4) | 2008.06.22 |
| [Javascript] DOM을 이용한 Element 추가 (0) | 2008.06.22 |
| [Javascript] DOM을 이용하여 이미지 동적 생성 하기 (0) | 2008.06.22 |
| XML Javascript DOM을 이용해 테이블 만들기 (0) | 2008.06.22 |
- Total
- Today
- Yesterday