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

다중 셀렉트 기본 방법

페이지 정보

작성자 MintState 댓글 0건 조회 11,190회 작성일 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 20419 11-17
177 MintState 18186 11-17
176 MintState 17118 04-24
175 MintState 16336 01-19
174 MintState 16085 11-17
173 MintState 16071 02-17
172 MintState 13814 11-17
171 MintState 13115 02-13
170 MintState 12732 04-29
169 MintState 12713 01-13
168 MintState 12573 02-13
167 MintState 12394 10-27
166 MintState 12224 09-01
165 MintState 11840 11-17
164 MintState 11673 01-05
163 MintState 11600 11-17
162 MintState 11555 11-17
161 MintState 11460 11-17
열람중 MintState 11191 10-23
159 MintState 11187 04-29
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2019, YesYo.com MintState. ™