<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
// 개발자모드. 접근하는 방법.
/*
document.selectForm.fruits
document.selectForm.fruits.options
document.selectForm.fruits.options[3] // 내가 원하는 옵션의 인덱스 입력.
document.selectForm.fruits.options[3].innerText // 선택한 인덱스의 글자를 보여줌.
document.selectForm.fruits.options[3].value // value값 보여줌.
document.selectForm.fruits.options[000.selectedIndex] // 000 = document.querySelect... 등등 입력.
document.selectForm.fruits.options[000.selectedIndex].innerText
document.selectForm.fruits.options[000.selectedIndex].value
*/
const fruits = document.selectForm.fruits; // form은 name을 사용함. (트렌드는 아님.)
fruits.addEventListener("change", () => {
let fruitsName = fruits.options[fruits.selectedIndex].textContent;
alert(fruitsName + "를 선택했습니다.");
});
// family site 만드는 방법.
const family = document.getElementById("family");
// 방법(1)
family.addEventListener("change", function () {
let options = this.options;
let index = options.selectedIndex;
location.href = options[index].value;
});
// 방법(2)
family.addEventListener("change", (event) => {
/*
화살표 함수에서는 this로 받을 수 없기 때문에
event.currentTarget으로 event 매개변수를 받음.
react는 거의 화살표 함수를 사용하는데
this를 사용할 때마다 화살표 함수 대신 function을 써야하니 불편.
따라서 이 방법을 많이 사용함. react 배울꺼니까 꼭 알아둘 것.
*/
let options = event.currentTarget.options;
let index = options.selectedIndex;
location.href = options[index].value;
});
});
</script>
<style></style>
</head>
<body>
<div class="container">
<h2>프로필</h2>
<form action="" name="selectForm">
<fieldset>
<legend>좋아하는 것들</legend>
<li>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" />
</li>
<li>
<label for="fruits">과일</label>
<select name="fruits" id="fruits">
<option value="">--- 선택 ---</option>
<option value="apple">사과</option>
<option value="strawberry">딸기</option>
<option value="kiwi">키위</option>
<option value="mango">망고</option>
<option value="melon">멜론</option>
<option value="watermelon">수박</option>
</select>
</li>
<li>
<label for="family">사이트</label>
<select name="family" id="family">
<option value="">--- 포털 사이트 ---</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.daum.net">다음</option>
<option value="http://www.nate.com">네이트</option>
<option value="http://www.google.co.kr">구글</option>
</select>
</li>
</fieldset>
</form>
</div>
</body>
</html>