document.from이름.select이름
- form요소의 name속성값을 통해 자식요소(select) 접근
select 내 모든 option 요소 접근
-> select요소.selectedIndex
선택한 option 값 접근
-> select요소.options[index].value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="frm" action="#" method="post" action="#" target="_blank" onsubmit="return false;">
<select name="major" onchange="sel_change()">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<input type="submit" value="전송" onclick="send()">
</form>
<p id="space"></p>
<script>
let options = document.frm.major.options // options 유사배열 형태 반환
console.log('options', options); // select 태그의 옵션들 : 총 3개(길이)
console.log('options 요소', options[1]);
console.log('options 요소의 값', options[1].value);
// 반복문으로 처리
// 초기식 설정; 조건식 설정; 작업후 처리
// 0; options.legth; i++
// options안에 있는 값들을 전체 출력
for(let i=0; i<options.length; i++) {
console.log(`option[${i+1}]: ${options[i].value}`);
}
const send = () => {
console.log('send 함수 호출')
// 1. 선택된 option태그 요소의 index값을 가져와보자
let sel = document.frm.major // html 문서에서 select 태그 접근
let sel_idx = sel.selectedIndex // 사용자가 선택한 인덱스 번호
console.log(sel);
console.log(sel_idx);
// 2. 가져온 index 값의 내용을 getTxt 라는 변수에 넣어보자
let getTxt = options[sel_idx].value;
console.log('getTxt', getTxt);
// 3. id가 spasce인 공간에 "가장 좋아하는 과목은 JS입니다." 라는 멘트를 띄워줄것
// 여러번 누르면 계속해서 누적되도록 만들어줄 것
let displayText = `가장 좋아하는 과목은 ${getTxt}입니다.`;
// 4. 화면에 출력하기
let space = document.getElementById('space');
space.innerHTML += displayText + '<br>';
}
const sel_change = () => {
// 1. select 태그에 접근 -> sel이라는 변수에 담아준다.
let sel = document.frm.major
// 2. selectexIndex 활용하여 sel_idx라는 변수에 담아주기
let sel_idx = sel.selectedIndex
// 3. 선택한 요소의 값을 가져오기
console.log(`선택된 인덱스 ${sel_idx}`)
console.log(`${sel.options[sel_idx].value}`)
}
</script>
</body>
</html>
개발자