※ 이 글은 이전 제 블로그에 있던 글을 옮겨 놓은겁니다.
아래 스크립트는 select의 간단한 예제 입니다. 콤보박스(combobox)라고도 불리는 녀석이죠.
form의 요소들 중에서 정말로 많이 쓰이는 녀석일 듯 싶습니다.
가장 중요한 element로 onChange라는게 있습니다.
글자에서 나타나듯이 select에서 선택된 걸 변경했을 때 발생하는 이벤트를 실행 시켜주죠.
이벤트로 selectEvent라는 javascript 함수를 실행 시키는데 이때 파라미터로 자기 자신을 넘겨주게 됩니다.
저도 얼마전에 알았지만 자기 자신을 넘겨주는 방법이 굉장히 유용하더군요.
아직 큰 사이트나 웹어플리케이션을 만들어 보지는 않았지만.. 이전에는 getElementsByName 으로 일일이 가지고 와서 했었거든요.
그리고 option이 있는데, 이걸로 리스트를 만들게 되고, 이때 value값을 받아서 출력해 줍니다.
option중 첫 번째 녀석을 보면 selected라는 element를 주었는데요.
이건 처음 페이지가 열렸을 때, 자동으로 선택해 주도록 해주는 설정입니다.
아마 이걸 안주게 되면.. 사용자가 '메뉴 1'을 그대로 선택하고 바로 submit을 하게 되면 NULL 값이 넘어오는 걸로 기억하고 있습니다.
아래 스크립트는 select의 간단한 예제 입니다. 콤보박스(combobox)라고도 불리는 녀석이죠.
form의 요소들 중에서 정말로 많이 쓰이는 녀석일 듯 싶습니다.
가장 중요한 element로 onChange라는게 있습니다.
글자에서 나타나듯이 select에서 선택된 걸 변경했을 때 발생하는 이벤트를 실행 시켜주죠.
이벤트로 selectEvent라는 javascript 함수를 실행 시키는데 이때 파라미터로 자기 자신을 넘겨주게 됩니다.
저도 얼마전에 알았지만 자기 자신을 넘겨주는 방법이 굉장히 유용하더군요.
아직 큰 사이트나 웹어플리케이션을 만들어 보지는 않았지만.. 이전에는 getElementsByName 으로 일일이 가지고 와서 했었거든요.
그리고 option이 있는데, 이걸로 리스트를 만들게 되고, 이때 value값을 받아서 출력해 줍니다.
option중 첫 번째 녀석을 보면 selected라는 element를 주었는데요.
이건 처음 페이지가 열렸을 때, 자동으로 선택해 주도록 해주는 설정입니다.
아마 이걸 안주게 되면.. 사용자가 '메뉴 1'을 그대로 선택하고 바로 submit을 하게 되면 NULL 값이 넘어오는 걸로 기억하고 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Select Event</title>
<script type="text/javascript">
function selectEvent(selectObj) {
alert(selectObj.value + "가 선택 되었습니다.");
}
</script>
</head>
<body>
<select name="select" onChange="javascript:selectEvent(this)">
<option value="menu1" selected>메뉴 1</option>
<option value="menu2">메뉴 2</option>
<option value="menu3">메뉴 3</option>
</select>
</body>
</html>
select.html'I／T > JavaScript' 카테고리의 다른 글
| Javascript Array 사용법 (0) | 2009.09.24 |
|---|---|
| Javascript switch문 사용법 (0) | 2009.06.16 |
| Javascript if문 사용법 (0) | 2009.06.16 |
| Javascript for문 사용법 (0) | 2009.06.16 |
| JavaScript <tr>태그, onclick 과 onmouseover 이벤트 처리 (0) | 2009.04.27 |
