HTML - 드롭다운 목록 생성(SELECT/OPTION)

기본 드롭다운 목록 만들기

 

 

 

기본 드롭다운 목록을 만들기 위해선 <select>태그와 <option>태그를 이용해 주면 된다.

<select name="continent">
	<option value= "none">===선택===</option>
	<option value="North America">North America</option>
	<option value="Asia">Asia</option>
	<option value="Africa">Africa</option>
	<option value="Europe">Europe</option>
	<option value="south America">south America</option>
	<option value="Oceania">Oceania</option>
	<option value="Antarctica">Antarctica</option>
</select>

<select>태그에서 name은 드롭다운 목록의 이름으로 전송 후 데이터를 참조를 위해 사용되어진다.

<option>태그에서 value는 서버에 전송될 값으로 value값이 없을 경우에는 option 사이의 내용이 서버에 전달 된다. <option>태그 사이의 이름은 드롭다운에 표시될 이름이다.

 

 

- 결과

 

===선택=== North America Asia Africa Europe south America Oceania Antarctica

 

 

 

 

 기본값(default) 지정

 

 

<select name="continent">
	<option value= "none">===선택===</option>
	<option value="North America" selected>North America</option>
	<option value="Asia">Asia</option>
	<option value="Africa">Africa</option>
	<option value="Europe">Europe</option>
	<option value="south America">south America</option>
	<option value="Oceania">Oceania</option>
	<option value="Antarctica">Antarctica</option>
</select>

기본값을 지정하지 않으면 가장 위에 있는 값이 기본으로 선택된다. 특정한 값을 기본값으로 지정하고 싶다면 <option>태그에 selected라고 지정을 해준다면 기본값으로 설정이 되어 드롭다운박스에 바로 값이 보이게 된다.

 

- 결과

 

===선택=== North America Asia Africa Europe south America Oceania Antarctica

 

 

 

 

 드롭다운 목록 비활성화

 

 

<select name="continent" disabled>
        <option value= "none">===선택===</option>
        <option value="North America" selected>North America</option>
        <option value="Asia">Asia</option>
        <option value="Africa">Africa</option>
        <option value="Europe">Europe</option>
        <option value="south America">south America</option>
        <option value="Oceania">Oceania</option>
        <option value="Antarctica">Antarctica</option>
</select>

드롭다운 목록을 전체 비활성화 하고 싶다면 select태그에 disabled라고 써주면 되고 특정항목만 비활성화 해주고 싶다면 option태그에 비활성화해주고싶은 항목에 disabled를 써주면 된다.

 

- 결과

 

===선택=== North America Asia Africa Europe south America Oceania Antarctica

 

 

 

 

특정항목 숨기기

 

<select name="continent">
        <option value= "none">===선택===</option>
        <option value="North America">North America</option>
        <option value="Asia">Asia</option>
        <option value="Africa" hidden>Africa</option>
        <option value="Europe" hidden>Europe</option>
        <option value="south America">south America</option>
        <option value="Oceania">Oceania</option>
        <option value="Antarctica">Antarctica</option>
</select>

특정항목을 사용하지 않아 숨기고 싶을 때는 option태그에 hidden을 써주면 된다.

 

- 결과

 

===선택=== North America Asia south America Oceania Antarctica