웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
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
제목 | 글쓴이 | 날짜 |
---|---|---|
[초허접기초] 하드디스크 용량을 구해보자..!! [13] | SeePaGae | 2004.01.24 |
제로 카운터 ip 체크형에서 쿠키 체크 형으로 바꾸기 [8] | 정재원 | 2004.01.27 |
이미지 업로드시 자동으로 섬네일 이미지 만들어 주기 [2] | 장정식 | 2004.02.02 |
많은 txt파일 db에 한번에 저장시키기 -_-;;(별 내용없으나 필요하신분은 보세요) [1] | 추천대화상대 | 2004.02.11 |
cd키랑 비슷한거 만들기 -_-;; [12] | 추천대화상대 | 2004.02.11 |
간단한 랜덤 게시물 구하는 간단한 소스입니다. [5] | NS | 2004.02.12 |
[허접팀]랜덤 이미지 불러오기( +_+)/" [9] | 『처니리♂』 | 2004.02.12 |
한꼬마의 제로보드 활용법 (게시물 추출하기) [4] | 한꼬마 | 2004.02.17 |
HTML,이미지,동영상 파일 열리지 않고 다운로드되도록 만들기(수정) [21] | TheMics | 2004.02.19 |
여러 DB에서 최근 게시물 추출하기 위한 소스 입니다. [6] | NS | 2004.02.21 |
폴더에 사진올려놓고 리스트자동으로 만들기 [7] | 김인기 | 2004.02.22 |
[허접팁]윈엠프 리스트창에 방송정보 보여주기;;[수정]
[5]
![]() | 『처니리♂』 | 2004.02.29 |
초간단 인라이브 방송여부 알아보기 프로그램. [12] | 심심타 | 2004.03.01 |
함수] Exec 함수에 대한 간략한 설명 [3] | NS | 2004.03.05 |
PHP와 MYSQL연동 관련함수 [3] | 백무혼 | 2004.03.07 |
드디어 PHP 5 RC1 발표(04.03.18) [8] | 써니루루☆ | 2004.03.19 |
배열의 정렬에 대한 약간의 강의 [2] | ♡다솜지기♡ | 2004.04.02 |
[국에 밥말아먹는 PHP 프로그래밍] 1-1. PHP는 뭐하는 밥이냐?! (상) (Build 2) [17] | 9000㎒ | 2004.04.18 |
트랙백 구현하기 - 1. 트랙백이란 무엇인가?
[4]
![]() | TheMics | 2004.04.18 |
엔지오 채널 따라하기 -_-& www자동 붙이기 [6] | 박종찬 | 2004.04.18 |