select option의 속성

select를 보통은 커스텀하여 사용하지만 기본으로 쓸 때 유용한 속성들을 정리해 놓았다.

 

 

1. hidden

선택이라는 글자를 보통은 옵션 처음에 놓지만

선택할 때는 제외하고 싶다면 option에 hidden을 넣어주면 된다.

<select>
    <option value="" hidden>선택</option>
    <option value="짜장면">짜장면</option>
    <option value="짬뽕">짬뽕</option>
    <option value="탕수육">탕수육</option>
</select>

 

• 기본   선택 짜장면 짬뽕 탕수육
• hidden 처리된 모습  짜장면 짬뽕 탕수육

기본적으로 안보이게 하고 싶을 때 쓴다.

 

 

2. selected

원하는 값을 미리 선택해놓고 싶을 때는 selected를 사용하면 된다.

<select>
    <option value="짜장면">짜장면</option>
    <option value="짬뽕" selected>짬뽕</option>
    <option value="탕수육">탕수육</option>
</select>

 

짜장면 짬뽕 탕수육

 

 

3. disabled

값을 선택하지 못하게 막을 때는 disabled를 사용하면 된다.

<select>
    <option value="" hidden>선택</option>
    <option value="짜장면" disabled>짜장면</option>
    <option value="짬뽕">짬뽕</option>
    <option value="탕수육">탕수육</option>
</select>

 

짜장면 짬뽕 탕수육

 

 

4. optgroup

option을 그룹으로 묶고싶다면 optgroup을 사용하면 아래처럼 묶어놓을 수가 있다.

<select>
    <option value="" hidden>선택</option>
    <optgroup label="중식">
        <option value="짜장면">짜장면</option>
        <option value="짬뽕">짬뽕</option>
        <option value="탕수육">탕수육</option>
    </optgroup>
    <optgroup label="한식">
        <option value="김치찌개">김치찌개</option>
        <option value="된장찌개">된장찌개</option>
        <option value="돼지불백">돼지불백</option>
    </optgroup>
</select>

 

짜장면 짬뽕 탕수육 김치찌개 된장찌개 돼지불백

 

** option에 value값이 없으면 option 사이의 내용이 서버에 전송되기 때문에 처음부터 잘 표시해두는게 좋다.

또한 서버에 전송하는것이라면 당연히 form태그로 감싸줘야한다.

 

참고로 속성들은 접근성을 더 좋게하려면 disabled="disabled" 이런식으로 표기해주는것이 좋고,

선택이라는 글자를 아예 선택할 수 없게 hidden과 disabled를 동시에 써도 무방하다.