목차
- <select> 예제 - 선택메뉴
- <select> 정의
- <select> 구문
- <select> 속성
- <select> 예제 - select option 메뉴링크를 새창/현재창 열기
- <select> 예제 - select 요소의 화살표 제거
- <select> 예제 - 현재 선택된 메뉴 표시 (= 현재메뉴에 불넣기)
<select> 예제 - 선택메뉴
<p>홈짱닷컴(homzzang.com)에서 가장 배우고 싶은 것은?</p>
<select>
<option value="html">html</option>
<option value="css">css</option>
<option value="php">php</option>
<option value="javascript">javascript</option>
</select>
<select> 정의
클릭하면 밑으로 펼쳐지는 선택 메뉴 (=드롭다운 선택메뉴) 생성.
1. cf.
<option> 태그 - <select> 태그 내부에서 선택 사항 나열.
2.
아래 쪽에 드롭 공간 없으면 자동으로 위로 열림.
3.
- 사용자에게 보이는 선택 사항은 <option>태그 안 텍스트이고,
- <input>・<button> 이용해 선택값을 서버에 전달할 때는 <option> 태그 속성 중 "value" 임.
- 따라서, <option value="선택1">선택1</option>처럼 적어줘야 정상 작동.
4.
<form> 태그 내부에서 사용자에게 입력 사항을 선택하게 할 때 사용 가능
5.
키보드 접근성을 위해서 자바스크립트를 이용해 디자인하지 않도록 함.
6.
시작태그와 종료태그로 구성
<select> 구문
<select>
<option value="선택사항1">선택사항1</option>
<option value="선택사항2">선택사항2</option>
</select>
<select> 속성
속성
|
속성값 |
쓰임새 |
비고 |
size
|
숫자 |
드롭다운 않고 바로 볼 수 있는 선택 메뉴 갯수 |
|
name
|
글자 |
다른 <select> 태그와 구별 위한 고유 이름 |
|
multiple
|
multiple |
다중 선택 가능 지정 (=한번에 여러 개 선택 가능) |
|
disabled
|
disabled |
<select> 드롭다운 선택 메뉴를 사용 못하게 함. |
|
autofocus
|
autofocus |
웹 페이지 로딩 시, 커서가 선택메뉴위치에 위치케 함. |
HTML5추가 |
form
|
form_id |
<select> 선택 메뉴가 어느 <form> 태그에 속하는지 지정 |
HTML5추가 |
required
|
required |
입력값 전송전 반드시 선택메뉴에서 선택사항을 고르도록 지정. |
HTML5추가 |
<select> 예제 - select option 메뉴링크를 새창/현재창 열기
새창으로 열기
<select onchange="if(this.value) window.open(this.value);">
<option value="">홈페이지 선택</option>
<option value="https://homzzang.com">홈짱닷컴</option>
<option value="https://sir.kr">그누보드</option>
</select>
현재창으로 열기
<select onchange="if(this.value) location.href=(this.value);">
<option value="">홈페이지 선택</option>
<option value="https://homzzang.com">홈짱닷컴</option>
<option value="https://sir.kr">그누보드</option>
</select>
결과보기
PS. <option> 태그의 value 속성에 링크 주소 없으면 작동 X.
<select> 예제 - select 요소의 화살표 제거
CSS appearance 속성 이용하면 됨.
https://homzzang.com/b/css-247
<select> 예제 - 현재 선택된 메뉴 표시 (= 현재메뉴에 불넣기)
※ 배추빌더5 게시판 이동 경우
<select class="hz" onchange="location.href=this.value">
<option value="https://homzzang.com/b/html">HTML</option>
<option value="https://homzzang.com/b/css">CSS</option>
<option value="https://homzzang.com/b/js">JS</option>
</select>
<script>
$('.hz option[value*="<php echo $bo_table ?>"]').prop('selected', true);
</script>