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

다중 셀렉트 기본 방법

페이지 정보

작성자 MintState 댓글 0건 조회 15,530회 작성일 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건 8 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
38 MintState 15684 11-17
37 MintState 10850 11-17
36 MintState 25169 11-17
35 MintState 12835 11-24
34 MintState 16262 01-05
33 MintState 14062 01-05
32 MintState 16469 01-13
31 MintState 15719 02-05
30 MintState 16389 02-13
29 MintState 18370 02-13
28 MintState 14791 02-23
27 MintState 15386 03-11
26 MintState 23781 04-24
25
레이어 팝업 댓글+ 2
MintState 14779 04-24
24 MintState 14957 05-13
23 MintState 17697 09-01
열람중 MintState 15531 10-23
21 MintState 16707 10-27
20 MintState 20698 01-19
19 MintState 24795 02-17
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™