select 태그 disabled와 selected

<label for="pet-select">애완동물:</label>
<select name="pets" id="pet-select">
  <option value="" disabled selected>--선택해주세요--</option>
  <option value="dog">개</option>
  <option value="cat">고양이</option>
  <option value="hamster">햄스터</option>
  <option value="parrot">족제비</option>
  <option value="spider">거미</option>
  <option value="goldfish">금붕어</option>
</select>

• '선택해주세요'는 첫 값이지만 선택해주세요를 고를 수는 없게 만들어야 된다.
• '선택해주세요'에 disabled를 넣어 다시는 선택 못 하도록 막는다.
• 하지만 disabled만 넣으면 첫 select 박스가 비어있다.
• 여기서 selected를 넣어줘 기본 값으로 선택되도록 한다. (안 바꿔 줬을 때 검증 필요)

직접 선택 input을 위한 변수 지정

<label for="pet-select">애완동물:</label>
<select v-model="selectOption" name="pets" id="pet-select">
  <option value="" disabled selected>--선택해주세요--</option>
  <option value="dog">개</option>
  <option value="cat">고양이</option>
  <option value="hamster">햄스터</option>
  <option value="parrot">족제비</option>
  <option value="spider">거미</option>
  <option value="goldfish">금붕어</option>
  <option value="직접입력">직접입력</option>
</select>
<input v-if="selectOption === '직접입력'" v-model="inputValue" type="text" />

<script setup>
const selectOption = ref('');
const inputValue = ref('');

watch(() => selectOption, () => {
	if(selectOption === '직접입력') inputValue.value = '';
    else inputValue.value = selectOption.value
})
</script>

• select 태그 선택은 selectOption 변수에 준다.
• select가 '직접입력'일 땐 input을 띄워준다.
• '직접입력'이 되면 inputValue를 초기화 해주고, v-modle로 설정한다.
• '직접입력'이 아니면 inputValue에 selectOption을 넣어준다.

참고 사이트

• https://sorto.me/docs/Web/HTML/Element/select