목차
<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>
주소 복사
랜덤 이동