다음과 같은 옵션 항목이 있다고 가정해보겠습니다.
옵션 항목을 위와 같이 출력하기 위해서는 아래와 같은 코드를 작성할 수 있습니다.
<body>
<form action="test1.html" method="get" name="frm1">
<select name = "sel">
<option value="1">사과</option>
<option value="2">수박</option>
<option value="3">딸기</option>
<option value="4">참외</option>
<option value="5">배</option>
</select>
<input type="button" value ="내용확인" onclick="checkfrm()">
</form>
</body>그렇다면, 사용자가 선택한 옵션 항목에 대해서 정보를 얻고 싶을때는 어떻게 하면 될까요?
첫번쨰로는, 선택한 항목에 대한 실행문을 출력해보겠습니다.
button에 onclick 이벤트를 ckeckfrm() 함수가 실행되게끔 설정해놨습니다.
그렇다면 함수를 이런식으로 작성할 수 있습니다.
<script>
const checkfrm = function() {
console.log(document.frm1.sel.options[document.frm1.sel.options.selectedIndex]);
};
</script>
console 출력
selectedIndex 속성이란?
select 태그에서 선택된 값의 위치 또는 순서 index를 알기 위해서 사용하는 속성이며, 선택된 태그의 index 넘버를 반환해줍니다.
두번쨰로는, 선택한 항목에 대한 text를 출력해보겠습니다.
<script>
const checkfrm = function() {
console.log(document.frm1.sel.options[document.frm1.sel.options.selectedIndex].text);
};
</script>
"내용확인" btn 클릭!
console 출력
세번쨰로는, 선택한 항목에 대한 value값을 출력해보겠습니다.
<script>
const checkfrm = function() {
console.log(document.frm1.sel.options[document.frm1.sel.options.selectedIndex].value);
};
</script>"내용확인" btn 클릭!
console 출력
추가적으로, 내용확인을 클릭한 후 옵션 항목에 대해서 초기값을 설정해보겠습니다..
초기값이란, 아래와 같이 옵션 항목이 초기에 출력되는 값입니다.
<script>
const checkfrm = function() {
document.frm1.sel.options.selectedIndex = 3;
};
</script>
인덱스 값을 3을 지정해주었습니다. 배열에서 인덱스는 0부터 시작하므로,
HTML에 기술된 순서상으로 4번째 항목이 출력되었겠죠?
댓글