<예제 이미지>
(+ 이미지및 디자인 파일은 함께 올리지 안아서 소스 그대로 이용이 불가능합니다. 상황에 맞게 수정해서 이용해주세요)
<htlm>
<form name = "form1" method="post" action="" enctype="multipart/form-data">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<th>첫 화면 구성하기</th>
<td>
<div id="pageSetup">
<li class="selectBox">
아래의 목록에서 선택하여 추가합니다<br />
<select multiple size="9" name='com_list'>
<option>상담중인 나의 고객 리스트</option>
<option>진행단계별 수속고객 현황</option>
<option>픽업 대기자 명단</option>
<option>Enroll 신청완료</option>
<option>Offer 접수</option>
<option>학비송금완료</option>
<option>COE 수령</option>
<option>홈스테이 신청자 및 디테일 수령자</option>
</select>
</li>
<li class="buttonBox">
<img src="/btn_move_right.gif" name="add" onClick="addCom()"><br><br>
<img src="/btn_move_left.gif" name="remove"onClick="delCom()">
</li>
<li class="selectBox">
나의 첫 화면의 목록 순서 설정 <br />
<select multiple size="9" name="com_chs" id="com_chs" >
</select>
</li>
<li class="buttonBox">
<img src="/btn_move_up.gif" onclick="moveItem('up', 'com_chs')" /><br><br>
<img src="/btn_move_down.gif" onclick="moveItem('down', 'com_chs')" />
</li>
</div>
</td>
</tr>
</table>
</form>
<Script>
<Script Language="JAVASCRIPT">
function sendit(){
var right_list = document.form1.elements["com_chs"];
//B 목록의 데이터를 전송하고자 할때 list를 selected 시켜준다
for(i=0; i<right_list.length; i++){
right_list.options[i].selected = "true";
}
document.form1.action ="";
document.form1.submit();
}
function addCom(){
var left_list = document.form1.elements["com_list"];
var right_list = document.form1.elements["com_chs"];
var str = new Array();
var str2 = new Array();
var str3 = new Array();
var idx = 0;
for ( i=0; i<left_list.length; i++ ){
if( left_list.options[i].selected==true ){
str[idx] = left_list.options[i].value;
str2[idx] = left_list.options[i].innerText;
str3[idx] = left_list.options[i].index;
idx++;
}
}
for ( i=0;i< str3.length;i++ ){
left_list.remove(str3[i]-i);
}
if( right_list.length==0 ) {
for( i=0; i<str.length; i++ ) {
right_list.options[i] = new Option(str2[i],str[i]);
}
}else if( right_list.length>0 ) {
for ( i=0; i<str.length; i++ ) {
right_list.options[right_list.length] = new Option(str2[i],str[i]);
}
}
}
function delCom(){
var right_list = document.form1.elements["com_list"];
var left_list = document.form1.elements["com_chs"];
var str = new Array();
var str2 = new Array();
var str3 = new Array();
var idx = 0;
for( i=0; i<left_list.length; i++ ){
if( left_list.options[i].selected==true ){
str[idx] = left_list.options[i].value;
str2[idx] = left_list.options[i].innerText;
str3[idx] = left_list.options[i].index;
idx++;
}
}
for( i=0;i< str3.length;i++ ){
left_list.remove(str3[i]-i);
}
if( right_list.length==0 ) {
for( i=0; i<str.length; i++ ) {
right_list.options[i] = new Option(str2[i],str[i]);
}
}else if( right_list.length>0 ) {
for( i=0; i<str.length;i++ ) {
right_list.options[right_list.length] = new Option(str2[i],str[i]);
}
}
}
// 순서 변경 스크립트
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>
출처 : http://ngweb.tistory.com/89
http://blog.naver.com/jinhi21c/20047118736
'프로그램 > html/css' 카테고리의 다른 글
[JAVAscript] 사이트가 가운데정렬일때 DIV위치 지정. (1) | 2012.01.06 |
---|---|
[javascript]창닫기시 확인 안뜨게 하기. (0) | 2012.01.04 |
[javascript]몇초후에 이동 (함수 실행) (0) | 2011.12.07 |
[HTML] input type="file" 태그에서 "찾아보기" 버튼을 이미지로 대체하는 방법 (2) | 2011.11.01 |
[스크랩] 아이폰/아이팟 터치용 웹 애플리케이션 개발 팁 12개 (0) | 2011.09.21 |