HTML 콤보박스(SELECT) 태그

HTML 콤보박스 태그

드롭다운 리스트(DropdownList)

 

입력 태그에 대하여 알아보도록 하겠습니다.

그 첫번째 포스팅으로 콤보박스(SELECT) 또는 드롭다운 리스트라고도 부르는 태그에 대하여 알아보도록 하겠습니다.

 

■ 형태

<SELECT NAME = "콤보박스명"> 
    <OPTION VALUE="값설정"> 표시 될 문구 </OPTION>

    <OPTION VALUE="값설정" > 표시 될 문구 </OPTION>

    <OPTION VALUE="값설정"> 표시 될 문구 </OPTION>
</SELECT>

 

■ 속성

 - ONCHANGE : 선택박스 값이 변경 되었을 때 이벤트를 발생 시킵니다.

 - SELECTED="SELECTED" : 해당 옵션이 선택되어 나타나게 합니다.

 

■ 예제소스

<SELECT NAME = "콤보박스명"  style="height:30px; width:100px;" ONCHANGE="alert(this.value);"> 
    <OPTION VALUE="1"> 목록 1 </OPTION>

    <OPTION VALUE="2" SELECTED="SELECTED"> 목록 2 </OPTION>

    <OPTION VALUE="3"> 목록 3 </OPTION>
</SELECT>

 

※ 예제 추가 설명(자바스크립트)

 alert는 알림메시지이며 this.value 는 선택 된 값(value) 을 타나냅니다.

 따라서 다른 콤보박스 항목을 선택하게 되면 해당 값이 알림 메시지로 나타나게 됩니다.

 style="height:30px; width:100px;"  부부은 보기 편하게 CSS 속성을 추가해 보았습니다.

 

■ 예제실행모습

목록 1 목록 2 목록 3