고정 헤더 영역
상세 컨텐츠
본문
select객체.selectedIndex : 선택된 옵션 항목의 인덱스 위치
select객체.options : option 항목들의 배열
<select> -> select.selectedIndex (선택된 옵션 위치)
<option></option> -> select.options.length
<option></option>
</select>
소스
<body>
<h2>select 활용하기 - 1</h2>
<form name="mForm" action="a.html">
<select name="sType">
<option value="">선택하세요</option>
<option value="writer">작성자</option>
<option value="title">제목</option>
</select>
<input type="text" name="sWord" />
<button type="button" onclick="doAction();">검색</button>
</form>
<script>
function doAction() {
// form 엘리먼트 접근
var f = document.mForm;
// select 엘리먼트 접근
var selEle = f.sType;
//console.log(selEle);
// 선택된 옵션 박스의 인덱스 확인
console.log("선택된 인덱스", selEle.selectedIndex);
// 검색어 값이 있고, 선택 박스에 검색 타입에 선택하세요가 선택된 경우 "검색항목을 선택하세요"
if (f.sWord.value != "" && selEle.selectedIndex == 0) {
alert("검색 항목을 선택하세요!");
return;
}
if (f.sWord.value == "") {
alert("검색어를 입력하세요!");
return;
}
}
</script>
</body>
결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - window 객체 (0) | 2020.06.04 |
|---|---|
| JavaScript - select 객체의 옵션 추가, 삭제, 비활성화(options.length, disabled) (0) | 2020.06.04 |
| JavaScript - checkbox 상태 확인(checked) (0) | 2020.06.04 |
| JavaScript - 폼 데이터 체크 후 서브밋 하기(onsubmit) (0) | 2020.06.04 |
| JavaScript - 엘리먼트의 값 추가, 삭제(innerHTML, remove) (0) | 2020.06.03 |
댓글 영역