14. select태그 _ 목록 선택

select는 목록을 선택하는 태그입니다.
자주 쓰이는 셀렉트바를 생성합니다.

우리가 흔히 태어난 년도를 선택할때나 살고있는 도시를 선택할때 쓰는 태그입니다.
기본형을 봅시다.

<select>
   <option>선택지1</option>
   <option>선택지2</option>
</select>
 

selected

앞에서 본 radio나 checkbox와 마찬가지로
처음부터 선택지를 기본값으로 선택이 가능합니다.
선택하고자 하는 option 뒤에 selected를 넣어줍니다.
똑같은 select에 selected를 넣었을때와 넣지 않았을때를 비교해 봅시다.

<select>
   <option>선택</option>
   <option>딸기</option>
   <option>바나나</option>
</select>
<select>
   <option>선택</option>
   <option>딸기</option>
   <option selected>바나나</option>
</select>
 

선택 딸기 바나나 선택 딸기 바나나

optgroup

optgroup은 선택지를 구분해주는 역할입니다.
각각의 option들을 그룹지어야 할 경우 사용합니다.

<select>
   <option>선택</option>
   <optgroup label="과일">
	  <option>딸기</option>
	  <option>바나나</option>
   </optgroup>
   <optgroup label="채소">
	  <option>당근</option>
	  <option>오이</option>
   </optgroup>
</select>
 

선택 딸기 바나나 당근 오이

multiple와 size

multiple은 다중선택이 가능하게 해주는 태그입니다.
select태그 뒤에 넣어주면 한개 이상의 option을 선택할 수 있게 해줍니다.
size 역시 select태그 뒤에 넣어주면 되며
화면에 몇개의 option이 출력될지 정하는 속성입니다.
선택된 숫자 이상의 option이 있을 경우, 스크롤 처리됩니다.

<select multiple size=5>
   <option>빨강</option>
   <option>주황</option>
   <option>노랑</option>
   <option>초록</option>
   <option>파랑</option>
   <option>남색</option>
   <option>보라</option>
</select>
 

빨강 주황 노랑 초록 파랑 남색 보라

* 개인적인 공부를 정리하는 블로그입니다.