select tag에 있는 option tag를 다른 select tag로 옮기기 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 폼 관련 > select tag에 있는 option tag를 다른 select tag로 옮기기 상세정보

클라우드태그

Javascript

PHP

asp

CSS

HTML

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

select tag에 있는 option tag를 다른 select tag로 옮기기

해피팀

네티즌

소스분류

폼 관련

다운로드 횟수

1159 회

간단설명

서로 다른 select박스안의 내용을 이동시켜보는 자바스크립트입니다.

평가하기

사용방법은 간단합니다. 데모를 보시면 부여받지 않은 권한과 부여받은 권한 인 select box로 나눠져있습니다.
부여받지 안은 권한 버튼 하단에 있는 쓰기, 읽기, 수정, 삭제가 있는데요
마우스로 선택하신다음 중간에 오른으로 이동이란 버튼은을 클릭합니다.
부여받지 안은 권한에 있던 쓰기버튼이 부여받은 권한으로 이동하게 됩니다.
자 이제 막 옴겨봄니다. 부여받은 권한이든 부여받지 안은 권한이든 양쪽으로 사정없이 이동이 되는군요.
이제 전체선택하셔서 이동이 되는지 한번 해봅시다.
되는군요 ^^

*아래부분은 위 자바스크랩트의 소스입니다.

<html>
<head><title>Select tag에 있는 OPTION tag를 다른 SELECT tag로 옮기기</title>
    <script language="JavaScript">
    <!--
    function moveLeft(obj) {
    //alert('select2 equal '+obj.id);
    for(var i=obj.options.length - 1;i>=0;i--) {
       if(obj.options[i].selected) {
       //alert(obj.options[i].text+' is selected!');
       //alert('select1 :'+select1);
       var oOption = document.createElement("OPTION");
       select1.options.add(oOption);
       oOption.innerText=obj.options[i].text;
       obj.options[i]=null;
       }
    }


    }

</head>

<body>

<table>
<tr>
<td>부여받지안은권한</td>
<td>버튼</td>
<td>부여받은권한</td>
</tr>
<tr>
<td valign="top"><select name="select1" id="select1" multiple="yes" size="10" style="width=100;">
<option>쓰기</option>
<option>읽기</option>
<option>수정</option>
<option>삭제</option>
</select>
</td>
<td valign="center"><input type="button" value="오른으로이동" onClick="moveRight(select1)"><br>
<input type="button" value="왼쪽으로이동" onClick="moveLeft(select2)">
</td>
<td valign="top"><select name="select2" id="select2" multiple="yes" size="10" style="width=100;" >