개발/JavaScript
JavaScript - select 객체(selectedIndex, options)
뉴에이스
2020. 6. 4. 14:05
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>
결과
