✔ select 박스 내 옵션 접근 방법
-
셀렉트 박스 선택 항목에 접근하기 위해 셀렉트 박스의 value 속성 활용
-> 선택된 항목의 value 값이 셀렉트 박스의 value 값으로 설정됨
⭐ Ex
<script>
function check() {
let divInfoArea = document.querySelector("#infoArea");
divInfoArea.innerHTML = document.fr.fruits.value;
}
</script>
<body>
<form name="fr">
<select name="fruits">
<option value="Apple">사과</option>
<option value="Strawberry">딸기</option>
<option value="Banana">바나나</option>
</select>
<input type="button" value="확인" onclick="check()">
</form>
<div id="infoArea"></div>
</body>📌 출력
셀렉트 박스 항목이
선택하세요일 경우 다른 항목을 선택하도록 오류 메세지 출력
-
셀렉트 박스 선택 항목이 널스트링("")인지 판별
-
셀렉트 박스 내의 option 태그 항목들이 options 배열로 관리됨
-> 해당 항목의 인덱스에 해당하는 요소의 속성 중 selected 속성이 true인지 판별
1번 방법
<script>
function check() {
if(document.fr.fruits.value == "") {
alert("과일 선택 필수");
document.fr.fruits.focus();
}else {
let divInfoArea = document.querySelector("#infoArea");
divInfoArea.innerHTML = document.fr.fruits.value;
}
}
</script>
<body>
<form name="fr">
<select name="fruits">
<option value="">선택하세요</option>
<option value="Apple">사과</option>
<option value="Strawberry">딸기</option>
<option value="Banana">바나나</option>
</select>
<input type="button" value="확인" onclick="check()">
</form>
<div id="infoArea"></div>
</body>2번 방법 (함수 부분만 변경)
if(document.fr.fruits.options[0].selected) {
// 선택하세요가 첫번째 항목이니까 0번 인덱스
alert("과일 선택 필수");
document.fr.fruits.focus();
}else if{
document.fr.fruits.options[1].selected) {
document.fr.fruits.options[1].disabled = true;
// 두 번째 항목(사과) 선택 시 사과 항목 더 이상 선택 못하도록 변경
}
}🔗 참고
HTML
disabled속성
- 셀렉트 박스에서 선택하지 못하도록 하는 속성
disabled="disabled"형태로 사용함
개발자가 되었어요⭐️