드롭다운 메뉴를 만드는 <select> 태그와 리스트를 생성하는 <optgroup>, <option> 태그

 

https://www.youtube.com/watch?v=gRyvG7PZ4m0&list=PLkC56g8fboI0HghByzVuD2Vz8ROUXfF_j&index=2&t=2s

 

바닐라 자바스크립트 코딩을 하는 스터디 2회차를 진행 중에 select 라는 태그를 발견하게 되었다.

---

 

select 태그는 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용한다.

select 태그 안에 optgroup, option 태그를 사용해 리스트를 생성할 수 있다.

 

optgroup 태그는 옵션의 카테고리를 지정할 수 있고,

option 으로 드롭다운 리스트를 정의할 수 있다.

 

사용 예시

<h2> 당신의 최애 디저트는? </h2>
<select name="dessert">
	<optgroup label="summer">
		<option value="iced fruits soup">화채</option>
		<option value="grinded ice">빙수</option>
	</optgroup>
	<optgroup label="winter">
		<option value="fish bread">붕어빵</option>
		<option value="sugar rice cake">호떡</option>
	</optgroup>
</select>

 

당신의 최애 디저트는?

화채 빙수 붕어빵 호떡

 

---

📃 select 속성값 📃

 

🎈 autofocues : autofocus

페이지가 로드될 때 자동으로 포커스가 드롭다운 리스트로 이동

 

🎈 disabled : disabled

드롭다운 리스트 비활성화

 

🎈 form : 아이디 값

드롭다운 리스트가 포함될 하나 이상의 <form> 요소를 명시

 

🎈 multiple : multiple

사용자가 다중 선택이 가능하도록 함

 

🎈 name : 텍스트

드롭다운 리스트의 이름을 명시

 

🎈 required : required

폼 데이터가 서버로 제출되기 전 사용자가 반드시 드롭다운 리스트의 값을 선택해야 함

 

🎈 size : 숫자

드롭다운 리스트에서 한 번에 보일 옵션의 개수 명시

 

---

 

📃 option 속성값 📃

 

🎈 value : 텍스트

 

🎈 selected : selected

해당 옵션을 기본값으로 설정

 

🎈 disabled : disabled

해당 옵션을 비활성화

---

 

📃 optgroup 속성값 📃

 

🎈 label : 텍스트

해당 옵션 그룹의 라벨을 명시함

 

🎈 disabled : disabled

해당 옵션 그룹을 비활성화