[CSS] select & option : 기본값 설정

 

 

💡 옵션의 기본값을 설정해보자

 

<select onChange={(e) => setMember(e.target.value)}>
  <option value="mads">Mads</option>
  <option value="jonathan"> Jonathan</option>
</select>

 

jonathan 의 페이지인데 option 의 맨 위 값인 Mads 가 표시되고 있다.

 

바꿔보자 ~

<select onChange={(e) => setMember(e.target.value)}>
  <option value="" selected disabled>
	===
  </option>
  <option value="mads">Mads</option>
  <option value="jonathan"> Jonathan</option>
</select>

 

기본값이 될 option 을 추가하고

seleted : 기본으로 설정하기

disabled : 선택이 안되게 막아두기

들을 적어주었다.

 

🚨 disabled 만 적어두면 기본값이 Mads 로 설정된다.

 

👀 추가 기능

1. hidden 숨기고 싶은 옵션에게 ~

2. select 에 disabled 속성을 넣으면 아예 옵션을 선택할 수 없게 막힌다!