HTML 콤보박스 선택 시 페이지 이동하기

 

HTML 콤보박스 태그에 대하여 알아 보겠습니다. 태그명이 select로 셀렉트박스 라고 부르기도 합니다.

콤보박스의 사용목적 2가지에 대하여 알아보고, 각각의 예제를 살펴 보도록 하겠습니다.

 

  기본 태그 사용 법

<select name="콤보박스명">
  <option value="항목 값1">항목 텍스트1</option>
  <option value="항목 값2">항목 텍스트2</option>
</select>

 

 

  콤보박스 사용 목적

1. 값의 전달 : 항목을 선택하여 해당 값을 전달하기 위한 목적
2. 액션 발생 : 항목을 선택 시에 특정 액션을 발생 시키기 위한 목적 

 

  목적에 따른 사용 예제

1.값의전달

※ 회원가입 등의 화면에서 성별에 대한 값을 사용자로 부터 선택 받아 값을 서버로 전달하기 위한 등의 목적에서 사용 됩니다. 다음 예제는 그와 같으 기능을 구현한 예제 입니다.

<select name="성별">   <option value="F">여성</option>   <option value="M">남성</option> </select>

2. 액션발생

※ 홈페이지 이동 또는 특정영역을 보여주거나 숨김 액션을 발생시키기 등의 다양한 액션발생을 위한 목적으로 사용 됩니다. 웹사이트 이동을 목적으로 사용하기 위한 예제 입니다.

<select name="goUrl" onchange="window.open(this.value);">   <option>사이트이동</option>   <option value="tistory.com">티스토리</option>   <option value="happylog.kr">HappyLog</option> </select>

▶onchange : 콤보박스 값이 변경(다른값의항목을 선택) 되었을 경우 정의 된 내용이 실행 됩니다.

▶window.open(url) : 자바스크립트 함수로 설정 된 url 화면을 오픈 합니다.

▶this.value : 사용된 객체마다의 자신의 값을 가지고 있습니다. 콤보박스에서 사용 할 경우 선택 된 값을 가지고 있습니다.

 

 

  예제결과