메뉴 건너뛰기

조회 수 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
번호 제목 날짜 조회 수
87 셀렉트(select) change 이벤트 (split) 2016.12.23 6009
86 셀렉트(select) change Ajax 이벤트 2016.12.23 12549
85 셀렉트(select) change href 이벤트 2016.12.23 5899
84 팝업창 가운데 띄우기 2016.12.23 6702
83 [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다 2017.02.19 8514
82 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker file 2017.04.06 16507
81 새로고침(F5) 금지 2018.03.28 5995
» Javascript selectbox selected 컨트롤 file 2018.06.21 10046
79 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징) file 2018.07.04 2711
78 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 2904
77 SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기. 2018.07.04 4010
76 반복문 사용할때 태그 식별하기 data-item 2018.07.04 1849
75 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기 2018.07.04 3956
74 다음 우편번호(주소) api 예시 file 2018.07.04 4897
73 cross site scripting을 막기위한...javascript 2018.07.24 1596
72 유용한 스크립트 모음 2018.07.24 2291
71 key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 1616
70 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 2785
69 팝업창 차단 "허용 메시지" 2018.09.28 1738
68 엔터키 / enter key submit form 2018.09.28 1528
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved