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

 
작성일 : 09-10-23 13:39
다중 셀렉트 기본 방법
 글쓴이 : MintState
조회 : 7,875  
다중 셀렉트 기본 방법

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

첫번째.
배열을 읽어와 보여 주는 방법이다. 가장 많이 사용하는 방법으로 데이타가 고정 적일때 사용한다.
배열을 따로 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';
Rated 4.0/5 (80%) (1 Votes)

(\__/)
(='.'=)
(")_(")~
Search Infomation by MintState
MintState

 
 

Total 173
번호 제   목 글쓴이 날짜 조회
173 GIF 플레이어(제어) MintState 09-26 78
172 youtube ID 값 추출 MintState 03-08 512
171 Javascript - 비밀번호 유효성 검사(password validation) MintState 11-14 936
170 하단고정레이아웃 MintState 07-01 1064
169 highcharts MintState 03-05 2099
168 jQuery Masonry 갤러리 리스트 효과 MintState 11-19 3148
167 파이어폭스, IE에 모두 적용되는 iframe 태그 MintState 04-11 8391
166 롤링 위 아래 버튼 적용 MintState 04-06 6290
165 Select 객체 추가 삭제 MintState 07-23 7205
164 숫자에 컴마(,) 쓰고 한글로 숫자 표시 MintState 06-09 6774
163 object 속성보기 MintState 04-29 9026
162 비밀번호 보안등급 체크 (2) MintState 04-29 10039
161 기본 공통 스크립트 MintState 04-16 7510
160 textarea에 줄바꿈 금지와 글자수 제한 MintState 02-17 13458
159 JSON 객체를 String으로 변환하기 MintState 01-19 13872
158 Tooltip 풍선 도움말 MintState 10-27 9590
157 다중 셀렉트 기본 방법 MintState 10-23 7876
156 자바스크립트를 이용한 암호화 MintState 09-01 9039
155 모든 자바스크립트 에러 잠재우기 (에러 디버그) MintState 05-13 8326
154 레이어 팝업 (2) MintState 04-24 8053
 1  2  3  4  5  6  7  8  9  
모바일 버전으로 보기
CopyRight ©2004 - 2017, YesYo.com MintState. ™