optgroup 태그 select option 그룹

optgroup 태그

select 내에 있는 option 태그들을 그룹화 하는 태그 입니다.

 

이 optgroup태그를 이해하기 위해서 먼저

기본 select 태그 예제를 만들어 보겠습니다.

<select name="title">
  <option value="tit1">제목1</option>
  <option value="tit2">제목2</option>
  <option value="tit3">제목3</option>
</select>

이런식으로 select태그는 늘어진 콤보박스 형태를 만드는 틀이고 그안에 항목들은 option태그를 이용해서 하나씩 나열할 수있습니다.

 

이 때 이 항목들을 그룹별로 대제목으로 묶어서 보여주고 싶을 경우에 사용하는것이 optgroup태그 입니다.

<select name="title">
  <optgroup label="대제목1">
    <option value="tit1">소제목1</option>
    <option value="tit2">소제목2</option>
  </optgroup>
  <optgroup label="대제목2">
    <option value="tit3">소제목3</option>
    <option value="tit4">소제목4</option>
  </optgroup>
</select>

 

 

이런식으로 optgroup태그를 이용하면 간단하게 항목들을 그룹화 해서 나타낼 수 있습니다.