22.06.05-html select 기본값설정(ex.선택해주세요)

select 사용시, "선택해주세요" 와 같이 데이터값은 넘어가지 않되, 안내하는 문구를 넣어야 할 때에는hidden과 disabled 속성을 사용하면 된다.

기본값은 "선택해주세요" 로 되어있지만 실제 selectbox 클릭 시 안내문구는 선택할 수 없게 되고, 실제 데이터 값이 넘어가는 옵션만 선택할 수 있게 된다.

 

<select>
  <option value="" selected disabled hidden>선택해주세요</option>
  <option value="1">옵션1</option>
  <option value="2">옵션2</option>
  <option value="3">옵션3</option>
  <option value="4">옵션4</option>
  <option value="5">옵션5</option>
</select>

위의 경우처럼 html에 일일히 옵션의 값을 직접 입력하지 않고 DB에서 셀렉트박스의 옵션값을 불러오는 경우에는 다음과 같이 사용했다.

 <select id="category_input" name="mcd" required="required">
      		<option value="" selected disabled hidden>카테고리를 선택해주세요.</option>
      	<c:forEach var="common" items="${itemCategoryList}" >
      		<option value="${common.mcd}" >${common.content}</option>
      	</c:forEach>
      </select>

결과를 보면 "선택해주세요"가 옵션에 보이지만 선택할 수는 없게된다.

 

 

이때 select태그에 required="required"를 해주면 카테고리를 선택하지 않았을 시 아래와 같이 항목을 선택하라는 문구가 자동으로 뜬다.