select box에서 선택할 수 없는 항목 만들기 / option 선택 안되게 비활성화/ disabled, selected

웹 개발을 하다 보면, 사용자가 선택할 수 없도록 특정 옵션을 비활성화해야 할 때가 있습니다. HTML의 <select> 태그 내에서 이를 구현할 수 있는 방법에 대해서 알아보겠습니다.

 

select box의 option 태그의 disabled, selected 속성 사용하기

<select> 태그를 이용해서 아래와 같은 선택 박스를 만들었을 때 "회원 종류를 선택해주세요."라는 문구를 자동적으로 보여주기 위해서는 option의 selected 속성을 사용합니다.

이때, 발생하는 문제는 "회원 종류를 선택해주세요."가선택해 주세요."가 선택되어 submit 되면 데이터베이스에 "회원 종류를 선택해 주세요."가 저장되는 문제가 발생했습니다. 이러한 경우를 해결 하는 방법입니다.

아래는 HTML의 예입니다.

<select class="form-select" name="mType">
    <option>회원 종류를 선택해주세요.</option>
    <option value="개인">개인</option>
    <option value="단체">단체</option>
    <option value="기업">기업</option>
</select>

 

selected 사용

option 태그에서 selected 속성을 사용하면 해당 option이 자동적으로 선택되어 있는 것을 확인할 수 있습니다.

selected 속성은 화면이 로드되었을 때 select 태그에서 기본으로 선택되는 option을 선택할 수 있습니다.

이처럼, selected 속성은 select box에서 기본적으로 선택되어 있는 option을 지정할 수 있습니다.

<select class="form-select" name="mType">
    <option selected>회원 종류를 선택해주세요.</option>
    <option value="개인">개인</option>
    <option value="단체">단체</option>
    <option value="기업">기업</option>
</select>

selected 속성 사용

반응형

disabled 사용

option 태그에 disabled 속성을 사용하면 해당 옵션을 선택할 수 없게 비활성화할 수 있습니다. 

disabled 속성이 명시된 option은 선택하거나, 사용할 수 없습니다.

<select class="form-select" name="mType">
    <option selected disabled>회원 종류를 선택해주세요.</option>
    <option value="개인">개인</option>
    <option value="단체">단체</option>
    <option value="기업">기업</option>
</select>

 

selected와 disabled 속성 사용

 

주의사항

• disabled 속성은 <option> 태그에만 적용됩니다. <select> 태그 전체를 비활성화하고 싶다면, <select> 태그에 disabled 속성을 추가하면 됩니다.
• 비활성화된 옵션은 사용자가 선택할 수 없으며, 폼 제출 시에도 해당 데이터는 전송되지 않습니다.