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

다중 셀렉트 기본 방법

페이지 정보

작성자 MintState 댓글 0건 조회 15,412회 작성일 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 178건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
178 MintState 25031 11-17
177 MintState 24576 02-17
176 MintState 23613 04-24
175 MintState 22316 11-17
174 MintState 20567 01-19
173 MintState 20128 11-17
172 MintState 19795 11-17
171 MintState 18225 11-17
170 MintState 18185 02-13
169 MintState 18092 11-17
168 MintState 17913 04-29
167 MintState 17754 11-17
166 MintState 17566 09-01
165 MintState 17109 11-17
164 MintState 16937 11-17
163 MintState 16842 11-17
162 MintState 16810 11-17
161 MintState 16759 11-17
160 MintState 16593 10-27
159 MintState 16500 04-06
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™