웹마스터 팁
Select 태그 관련 스크립트
2004.02.04 21:20
오랜만에 뵈네요 :)
쓸데없는 스크립트만 만들어서 가져오는 뒹굴리스트(Zective) 입니다^^;
이번 소스도 역시나 심심해서 만들게 된 스크립트입니다^^;
Select 태그에 관련된 스크립트를 만들어봤는데 아직 좀 미숙하네요;
주석은 줄마다 달아놔서 알아보시는데 큰 무리는 없을 거라 생각됩니다 :)
소스 이곳저곳 보시면서 간단한 것이라도 수정해서 사용해 보시면 좋을 거예요 :D
그럼 이만~!
---------------------------------------------------------------------------------------------------------
예제 : http://zective.com/sample/sample.html
<html>
<head>
<script>
/* Option 추가 */
function addOpt(_text, _value)
{
// 새로운 Option 속성을 생성한다
var newOpt = document.createElement('OPTION');
// 새로운 Option의 text 지정
newOpt.text = _text;
// 새로운 Option의 value 지정
newOpt.value = _value;
// 마지막으로 'two' Select 태그에 Option을 추가한다
document.forms['test'].elements['two'].add(newOpt);
}
/* 모든 Option 삭제 */
function allDel(_mode)
{
// 'two' Select 태그의 Option 갯수를 구한다
var len = document.forms['test'].elements['two'].options.length;
// 'two' Select 태크의 Option의 갯수가 0개이면 에러창 출력하고 중지
if(len == 0)
{
window.alert("옵션이 존재하지 않습니다.");
return false;
}
// 원클릭으로 모든 삭제일 경우
if(_mode == "direct")
{
// 삭제하기 전에 사용자에게 묻기
var que = confirm("모든 항목을 삭제하시겠습니까?");
}
// 다른 Function에 속해있을 경우
else
{
// que 변수 true 값 지정
var que = true;
}
// 삭제를 승인했을 경우
if(que == true)
{
// 'two' Select 태그의 모든 Option을 삭제
document.forms['test'].elements['two'].options.length=0;
}
}
function doOpt(_mode)
{
/* Option 추가 실행 */
if(_mode == 'add')
{
// 'one' Select 태그의 Option 갯수를 구한다
var leno = document.forms['test'].elements['one'].options.length;
// 체크변수 (기본 : 0)
var cnum = 0;
// 갯수만큼 반복 실행
for(o=0; o<leno; o++)
{
// 체크된 Option이 있으면 체크변수를 +1 한다
if(document.forms['test'].elements['one'].options[o].selected == true)
{
cnum++;
}
}
// 선택된 Option의 갯수가 0개이면 에러창 출력하고 중지
if(cnum == 0)
{
window.alert("선택된 옵션이 없습니다.");
return false;
}
// 갯수만큼 반복 실행
for(i=0; i<leno; i++)
{
// i 순서 해당하는 Option이 선택되어 있으면
if(document.forms['test'].elements['one'].options[i].selected == true)
{
// 'two' Select 태그의 Option 갯수를 구한다
var lent = document.forms['test'].elements['two'].options.length;
// Option 갯수가 0개이면
if(lent == 0)
{
// 'one' Select 태그에서 선택된 text와 value를 가지고 'two' Select 태그에 동일한 text와 value를 지닌 Option을 생성한다
addOpt(document.forms['test'].elements['one'].options[i].text, document.forms['test'].elements['one'].options[i].value);
}
// 1개 이상이면
else
{
// 갯수만큼 반복 실행
for(ii=0; ii<lent; ii++)
{
// i 순서에 해당하는 Option이 이미 'two' Select 태그 Option으로 있다면 에러창 출력하고 중지(Text로 구분)
if(document.forms['test'].elements['one'].options[i].text == document.forms['test'].elements['two'].options[ii].text)
{
window.alert("이미 등록된 값이 있어 중지됩니다.");
return false;
}
}
// 'one' Select 태그에서 선택된 text와 value를 가지고 'two' Select 태그에 동일한 text와 value를 지닌 Option을 생성한다
addOpt(document.forms['test'].elements['one'].options[i].text, document.forms['test'].elements['one'].options[i].value);
}
}
}
}
/* Option 삭제 실행 */
else
{
// Option 데이터 백업 용도로 쓰일 배열 생성
Temp_text = new Array();
Temp_value = new Array();
// 배열수 (기본 : 0)
var bn = 0;
// 'two' Select 태그의 Option 갯수를 구한다
var len = document.forms['test'].elements['two'].options.length;
// 체크변수 (기본 : 0)
var cnum = 0;
// 갯수만큼 반복 실행
for(o=0; o<len; o++)
{
// 체크된 Option이 있으면 체크변수를 +1 한다
if(document.forms['test'].elements['two'].options[o].selected == true)
{
cnum++;
}
}
// 선택된 Option의 갯수가 0개이면 에러창 출력하고 중지
if(cnum == 0)
{
window.alert("선택된 옵션이 없습니다.");
return false;
}
// 갯수만큼 반복 실행
for(i=0; i<len; i++)
{
// i 순서에 해당하는 Option이 선택되어 있지 않으면
if(document.forms['test'].elements['two'].options[i].selected == false)
{
// 백업 배열에 text와 value를 넣고 배열수를 +1 한다
Temp_text[bn] = document.forms['test'].elements['two'].options[i].text;
Temp_value[bn] = document.forms['test'].elements['two'].options[i].value;
bn++;
}
}
// 'two' Select 태그의 모든 Option을 삭제
allDel();
// 백업 배열의 크기만큼 반복 실행
for(bn=0; bn<Temp_text.length; bn++)
{
// bn 배열수를 이용하며 백업 배열 데이터를 가져온다
addOpt(Temp_text[bn], Temp_value[bn]);
}
}
}
</script>
</head>
<body bgcolor="black">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="350">
<form name="test">
<col width="175" align="center"></col><col width="175" align="center"></col>
<tr>
<td>
<select id="one" multiple size="20" style="width:80%; background:#202020; font size:11px Tahoma; color:white;">
<option value="1">Data 1</option>
<option value="2">Data 2</option>
<option value="3">Data 3</option>
<option value="4">Data 4</option>
<option value="5">Data 5</option>
<option value="6">Data 6</option>
<option value="7">Data 7</option>
<option value="8">Data 8</option>
<option value="9">Data 9</option>
<option value="10">Data 10</option>
<option value="11">Data 11</option>
<option value="12">Data 12</option>
<option value="13">Data 13</option>
<option value="14">Data 14</option>
<option value="15">Data 15</option>
<option value="16">Data 16</option>
<option value="17">Data 17</option>
<option value="18">Data 18</option>
<option value="19">Data 19</option>
<option value="20">Data 20</option>
</select>
</td>
<td>
<select id="two" multiple size="20" style="width:80%; background:#101010; font size:11px Tahoma; color:white;">
</select>
</td>
</tr>
<tr height="10">
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="추가 +" style="border:0; background:#303030; color:white; font size:12px 굴림; width:101px; height:23px;" onclick=" doOpt('add')">
<input type="button" value="삭제 -" style="border:0; background:#303030; color:white; font size:12px 굴림; width:101px; height:23px;" onclick=" doOpt('del')">
<input type="button" value="모두 삭제" style="border:0; background:#303030; color:white; font size:12px 굴림; width:101px; height:23px;" onclick="allDel('direct')">
</td>
</tr>
</form>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------
여러가지 데이터베이스와 연동해서 Option을 구성해도 되겠군요 :)
쓸데없는 스크립트만 만들어서 가져오는 뒹굴리스트(Zective) 입니다^^;
이번 소스도 역시나 심심해서 만들게 된 스크립트입니다^^;
Select 태그에 관련된 스크립트를 만들어봤는데 아직 좀 미숙하네요;
주석은 줄마다 달아놔서 알아보시는데 큰 무리는 없을 거라 생각됩니다 :)
소스 이곳저곳 보시면서 간단한 것이라도 수정해서 사용해 보시면 좋을 거예요 :D
그럼 이만~!
---------------------------------------------------------------------------------------------------------
예제 : http://zective.com/sample/sample.html
<html>
<head>
<script>
/* Option 추가 */
function addOpt(_text, _value)
{
// 새로운 Option 속성을 생성한다
var newOpt = document.createElement('OPTION');
// 새로운 Option의 text 지정
newOpt.text = _text;
// 새로운 Option의 value 지정
newOpt.value = _value;
// 마지막으로 'two' Select 태그에 Option을 추가한다
document.forms['test'].elements['two'].add(newOpt);
}
/* 모든 Option 삭제 */
function allDel(_mode)
{
// 'two' Select 태그의 Option 갯수를 구한다
var len = document.forms['test'].elements['two'].options.length;
// 'two' Select 태크의 Option의 갯수가 0개이면 에러창 출력하고 중지
if(len == 0)
{
window.alert("옵션이 존재하지 않습니다.");
return false;
}
// 원클릭으로 모든 삭제일 경우
if(_mode == "direct")
{
// 삭제하기 전에 사용자에게 묻기
var que = confirm("모든 항목을 삭제하시겠습니까?");
}
// 다른 Function에 속해있을 경우
else
{
// que 변수 true 값 지정
var que = true;
}
// 삭제를 승인했을 경우
if(que == true)
{
// 'two' Select 태그의 모든 Option을 삭제
document.forms['test'].elements['two'].options.length=0;
}
}
function doOpt(_mode)
{
/* Option 추가 실행 */
if(_mode == 'add')
{
// 'one' Select 태그의 Option 갯수를 구한다
var leno = document.forms['test'].elements['one'].options.length;
// 체크변수 (기본 : 0)
var cnum = 0;
// 갯수만큼 반복 실행
for(o=0; o<leno; o++)
{
// 체크된 Option이 있으면 체크변수를 +1 한다
if(document.forms['test'].elements['one'].options[o].selected == true)
{
cnum++;
}
}
// 선택된 Option의 갯수가 0개이면 에러창 출력하고 중지
if(cnum == 0)
{
window.alert("선택된 옵션이 없습니다.");
return false;
}
// 갯수만큼 반복 실행
for(i=0; i<leno; i++)
{
// i 순서 해당하는 Option이 선택되어 있으면
if(document.forms['test'].elements['one'].options[i].selected == true)
{
// 'two' Select 태그의 Option 갯수를 구한다
var lent = document.forms['test'].elements['two'].options.length;
// Option 갯수가 0개이면
if(lent == 0)
{
// 'one' Select 태그에서 선택된 text와 value를 가지고 'two' Select 태그에 동일한 text와 value를 지닌 Option을 생성한다
addOpt(document.forms['test'].elements['one'].options[i].text, document.forms['test'].elements['one'].options[i].value);
}
// 1개 이상이면
else
{
// 갯수만큼 반복 실행
for(ii=0; ii<lent; ii++)
{
// i 순서에 해당하는 Option이 이미 'two' Select 태그 Option으로 있다면 에러창 출력하고 중지(Text로 구분)
if(document.forms['test'].elements['one'].options[i].text == document.forms['test'].elements['two'].options[ii].text)
{
window.alert("이미 등록된 값이 있어 중지됩니다.");
return false;
}
}
// 'one' Select 태그에서 선택된 text와 value를 가지고 'two' Select 태그에 동일한 text와 value를 지닌 Option을 생성한다
addOpt(document.forms['test'].elements['one'].options[i].text, document.forms['test'].elements['one'].options[i].value);
}
}
}
}
/* Option 삭제 실행 */
else
{
// Option 데이터 백업 용도로 쓰일 배열 생성
Temp_text = new Array();
Temp_value = new Array();
// 배열수 (기본 : 0)
var bn = 0;
// 'two' Select 태그의 Option 갯수를 구한다
var len = document.forms['test'].elements['two'].options.length;
// 체크변수 (기본 : 0)
var cnum = 0;
// 갯수만큼 반복 실행
for(o=0; o<len; o++)
{
// 체크된 Option이 있으면 체크변수를 +1 한다
if(document.forms['test'].elements['two'].options[o].selected == true)
{
cnum++;
}
}
// 선택된 Option의 갯수가 0개이면 에러창 출력하고 중지
if(cnum == 0)
{
window.alert("선택된 옵션이 없습니다.");
return false;
}
// 갯수만큼 반복 실행
for(i=0; i<len; i++)
{
// i 순서에 해당하는 Option이 선택되어 있지 않으면
if(document.forms['test'].elements['two'].options[i].selected == false)
{
// 백업 배열에 text와 value를 넣고 배열수를 +1 한다
Temp_text[bn] = document.forms['test'].elements['two'].options[i].text;
Temp_value[bn] = document.forms['test'].elements['two'].options[i].value;
bn++;
}
}
// 'two' Select 태그의 모든 Option을 삭제
allDel();
// 백업 배열의 크기만큼 반복 실행
for(bn=0; bn<Temp_text.length; bn++)
{
// bn 배열수를 이용하며 백업 배열 데이터를 가져온다
addOpt(Temp_text[bn], Temp_value[bn]);
}
}
}
</script>
</head>
<body bgcolor="black">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="350">
<form name="test">
<col width="175" align="center"></col><col width="175" align="center"></col>
<tr>
<td>
<select id="one" multiple size="20" style="width:80%; background:#202020; font size:11px Tahoma; color:white;">
<option value="1">Data 1</option>
<option value="2">Data 2</option>
<option value="3">Data 3</option>
<option value="4">Data 4</option>
<option value="5">Data 5</option>
<option value="6">Data 6</option>
<option value="7">Data 7</option>
<option value="8">Data 8</option>
<option value="9">Data 9</option>
<option value="10">Data 10</option>
<option value="11">Data 11</option>
<option value="12">Data 12</option>
<option value="13">Data 13</option>
<option value="14">Data 14</option>
<option value="15">Data 15</option>
<option value="16">Data 16</option>
<option value="17">Data 17</option>
<option value="18">Data 18</option>
<option value="19">Data 19</option>
<option value="20">Data 20</option>
</select>
</td>
<td>
<select id="two" multiple size="20" style="width:80%; background:#101010; font size:11px Tahoma; color:white;">
</select>
</td>
</tr>
<tr height="10">
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="추가 +" style="border:0; background:#303030; color:white; font size:12px 굴림; width:101px; height:23px;" onclick=" doOpt('add')">
<input type="button" value="삭제 -" style="border:0; background:#303030; color:white; font size:12px 굴림; width:101px; height:23px;" onclick=" doOpt('del')">
<input type="button" value="모두 삭제" style="border:0; background:#303030; color:white; font size:12px 굴림; width:101px; height:23px;" onclick="allDel('direct')">
</td>
</tr>
</form>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------
여러가지 데이터베이스와 연동해서 Option을 구성해도 되겠군요 :)
댓글 12
-
TheMics
2004.02.04 21:44
샘플 페이지 타이틀이;; -
Zective
2004.02.04 21:45
쉬...쉿;; -
플로렐라
2004.02.04 22:37
멋진 타이틀+ㅁ+/ -
호경
2004.02.04 22:56
오른쪽으로 옮긴 데이터들 순서도 바뀌면 좋겠군요[헐]...;;; -
Zective
2004.02.04 23:00
호경 // 아...^^; 그것을 구현 안 했군요;; 조만간에 해당 기능[??]도 넣겠습니다^^; -
이승현
2004.02.05 10:54
이건 자바가 아니라 php같은데요...php언어가 왜 들어있어요~ -
Pe-i
2004.02.05 11:18
이승현//저거 자바스크립트 맞습니다 -_-;
저기선 PHP의 'P'자도 안보이네요 ;ㄹ; -
Pe-i
2004.02.05 11:18
아참 그러고 오른쪽으로 옮겼을 경우 왼쪽에서는 사라지게 하는 방법도 ;ㄹ; -
∑Ztxy
2004.02.05 18:48
이승현//주석문이 달려서 그러신듯...-_-;;
뒹굴리스트//옷...+_+ 소스 멋있습니다... -
앳플군
2004.02.06 16:13
왠지 주석이 더 길군요 [..] -
Zective
2004.02.06 20:53
앳플군 // 차후 관리를 위해-_-); -
piasol
2004.02.07 19:45
어우!! 이거 좋네여 ^^