YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

다중 셀렉트 기본 방법

페이지 정보

작성자 MintState 댓글 0건 조회 8,878회 작성일 09-10-23 13:39

본문

다중 셀렉트 기본 방법

다중 셀렉트는 자주 사용되는 것이다.
간단히 동작 방법을 알아보자. 아래 방법을 가지고 응용하면 된다.

첫번째.
배열을 읽어와 보여 주는 방법이다. 가장 많이 사용하는 방법으로 데이타가 고정 적일때 사용한다.
배열을 따로 JS 파일을 만들어 읽어 오는 것이 좋다.
만일 배열 데이타가 수시로 바뀐다면 매번 JS 파일을 만들어 주어야 하기 때문에 여간 불편 한것이 아니다.
<form name=pubform method=post action=''>
<select name=selectName onChange="selectSecond(this.selectedIndex-1);">
	<option value=''>1차 고르시오</option>
	<option value='1'>1</option>
	<option value='2'>2</option>
</select>
<select name=secondOption>
	<option value=''>2차</option>
</select>
</form>

<script language="javascript">
function selectSecond(n) {
		fs = document.pubform.secondOption;
		if(n==-1) {
				fs.selectedIndex = 0;
				return;
		} else {
				for(j=0;j<arrSecondText[n].length;j++) {     
						fs.options[j]=new Option(arrSecondText[n][j],arrSecondValue[n][j]);
				}
				fs.length=arrSecondText[n].length;
		}
}

arrSecondText = new Array(2);
arrSecondValue = new Array(2);

arrSecondText[0] = new Array(6);
arrSecondValue[0] = new Array(6);

arrSecondText[0][0] = "선택";
arrSecondValue[0][0] = "";
arrSecondText[0][1] = "옵션11";
arrSecondValue[0][1] = "11";
arrSecondText[0][2] = "옵션12";
arrSecondValue[0][2] = "12";
arrSecondText[0][3] = "옵션13";
arrSecondValue[0][3] = "13";
arrSecondText[0][4] = "옵션14";
arrSecondValue[0][4] = "14";
arrSecondText[0][5] = "옵션15";
arrSecondValue[0][5] = "15";

arrSecondText[1] = new Array(6);
arrSecondValue[1] = new Array(6);

arrSecondText[1][0] = "선택";
arrSecondValue[1][0] = "";
arrSecondText[1][1] = "옵션21";
arrSecondValue[1][1] = "21";
arrSecondText[1][2] = "옵션22";
arrSecondValue[1][2] = "22";
arrSecondText[1][3] = "옵션23";
arrSecondValue[1][3] = "13";
arrSecondText[1][4] = "옵션24";
arrSecondValue[1][4] = "24";
arrSecondText[1][5] = "옵션25";
arrSecondValue[1][5] = "25";
</script>



두번째.
아래 방법도 유용하다. 서버 스크립트로 요청된 셀렉트 값을 즉시 만들어 주는 방법이다.
위 방법보다는 느리지만 자주 바뀌는 데이타라면 아래 방법이 유용하다.
<form name=pubform method=post action=''>
<select name=selectName onChange="selectSecond();">
	<option value=''>1차 고르시오</option>
	<option value='1'>1</option>
</select>
<select name=secondOption>
	<option value=''>2차</option>
</select>
</form>

<script id="selectOption"></script>
<script language="javascript">
function selectSecond() {            
	selectOption.src = "optionSelect.php"; 
}
</script>


optionSelect.php
<?
header("Content-Type: application/x-javascript");
?>
document.forms['pubform'].elements['secondOption'].length = 6;
document.forms['pubform'].elements['secondOption'].options[0].text = '선택';
document.forms['pubform'].elements['secondOption'].options[0].value = '';
document.forms['pubform'].elements['secondOption'].options[1].text = '옵션1';
document.forms['pubform'].elements['secondOption'].options[1].value = '1';
document.forms['pubform'].elements['secondOption'].options[2].text = '옵션2';
document.forms['pubform'].elements['secondOption'].options[2].value = '2';
document.forms['pubform'].elements['secondOption'].options[3].text = '옵션3';
document.forms['pubform'].elements['secondOption'].options[3].value = '3';
document.forms['pubform'].elements['secondOption'].options[4].text = '옵션4';
document.forms['pubform'].elements['secondOption'].options[4].value = '4';
document.forms['pubform'].elements['secondOption'].options[5].text = '옵션5';
document.forms['pubform'].elements['secondOption'].options[5].value = '5';

댓글목록

등록된 댓글이 없습니다.

Total 176건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
176 MintState 119 04-19
175 MintState 559 11-02
174 MintState 513 10-27
173 MintState 589 09-26
172 MintState 1114 03-08
171 MintState 1632 11-14
170 MintState 1725 07-01
169 MintState 2648 03-05
168 MintState 3660 11-19
167 MintState 8964 04-11
166 MintState 7160 04-06
165 MintState 7757 07-23
164 MintState 7603 06-09
163 MintState 9544 04-29
162 MintState 10692 04-29
161 MintState 8119 04-16
160 MintState 14084 02-17
159 MintState 14427 01-19
158 MintState 10176 10-27
열람중 MintState 8879 10-23
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2018, YesYo.com MintState. ™