메뉴 건너뛰기

조회 수 10046 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

웹사이트에서 여러가지 문항중 선택할 수 있게 해주는 것이 selectbox인데요. jsp에서 html이용하여 구성할 수도 있지만 javascript를 이용할 수도 있습니다. 그래서 Javascript selectbox 컨트롤 방법에 대해서 알아보겠습니다.

이 selectbox는 사용자가 선택을 하게 되면 해당 값에 selected 됩니다. selected 옵션을 바꿔서 다른 값을 선택할 수 있으며, 선택된 값을 출력할 수도 있습니다.


예제 소스

<head>
<script type="text/javascript">
function GoEx(){
	var sel = document.getElementById("exam");
	for(var i=0; i<sel.length; i++){
		if(sel[i].value==2){
			sel[i].selected = true;
		}
	}
}
</script>
</head>
<body>
테스트 예제<br>
<select id="exam" >
<option value="1">바나나</option>
<option value="2">파인애플</option>
<option value="3">키위</option>
</select>
<input type="button" value="액션" onclick="GoEx()"/>
</body>

소스 결과

selectbox

예제 코드를 작성하여 실행하면 위와 같은 그림처럼 셀렉트박스 나타나는데요.

여기서 과일 하나를 선택하게 되면 해당 과일의 옵션이 selected가 됩니다.

그리고 액션 버튼을 누르면 onclick에 의해 GoEx 펑션이 실행되는데요.

selectbox2
펑션을 살펴보면 처음에 getElementById를 통해 셀렉트박스의 값을 가져옵니다.

그리고 해당 option의 갯수만큼 for문을 실행하게 되고 해당 옵션의 값이 2일 경우 지정된 옵션의 selected 를 true로 지정하여 해당되는 값을 선택 할 수가 있습니다


List of Articles
번호 제목 날짜 조회 수
227 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 1437
226 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 197
225 DTREE 트리구조 만들기 file 2021.03.26 851
224 페이지 이동 2021.03.26 190
223 default 매개변수(매개변수 기본값) 2021.03.26 199
222 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 319
221 현재 날짜, 시간 ( Month + 1 에 대해서 ) 2021.03.25 218
220 오브젝트 속성 2021.03.25 237
219 jqgrid 이용한 그리드 활용하기 file 2021.03.25 2287
218 HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) file 2021.03.09 710
217 Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 2021.03.09 302
216 Javascript - Free SVG 한국맵 제어 처리 file 2021.03.09 864
215 Javascript - form태그 내부 ajax처리시 2번 전송되는 현상 2021.03.09 266
214 javascript - vanillaJS로 체크박스(checkbox) 제어하기 file 2021.03.09 472
213 Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등) 2021.03.09 718
212 Javascript - 사업자 등록번호 유효성 체크 file 2021.03.09 1088
211 Javascript - Calendar 달력 생성하고 제어하기 2021.03.09 511
210 Javascript - 입력한 년, 월의 마지막 날짜 구하기 2021.03.09 219
209 Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항) file 2021.03.09 2125
208 Javascript - 이미지 미리보기 회전되어 나옴(EXIF) file 2021.03.09 36160
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved