select
<select>태그로 표현되는 드롭다운 요소는 그 자체가 배열이며
<option>태그들이 배열의 요소가 된다.- 드롭다운 객체에 대한
selectedIndex는 선택된 요소의 배열 인덱스를 의미 - 서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
01.드롭다운 제어
var dropdown = document.form의 name값.select의 name값;
-
특정 위치 강제 선택
dropdown.selectedIndex = 2; -
현재 선택된 요소의 위치
var choice_index = dropdown.selectedIndex; -
현재 선택된 요소의 value값
var choice_value = dropdown[choice_index].value;
02. 첫번째 <option> 요소 제어
- 주로 첫 번째
<option>요소는 선택을 요구하기 위한
안내문이 표시되는 경우가 많기 때문에
selectedIndex값이 0인 경우는 선택한 것으로 간주하지 않는다.
if (dropdown.selectedIndex == 0) {
... 선택되지 않은 경우의 처리 ...
}03.chang 이벤트
- input요소의 change이벤트는 입력 후 포커스가 빠져 나왔을 때 동작함
document.querySelector("#src").addEventListener('change', e => {
document.querySelector('#dsc').value = e.currentTarget.value;
});04.keyup 이벤트
- 실시간으로 키 입력을 감지하기 위해서는 keyup이벤트 사용
document.querySelector('#keycheck').addEventListener('keyup', e => {
document.querySelector('#keycode').innerHTML = e.currentTarget.value;
});05.예제
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<select name="site" id="site">
<option value="">-----선택하세요-----</option>
<option value="https://www.naver.com">네이버</option>
<option value="https://www.daum.net">다음</option>
<option value="https://www.google.com">구글</option>
</select>
<hr />
<input type="text" id="src" />
<input type="text" id="dsc" readonly />
<hr />
<input type="text" id="keycheck" />
<p id="keycode"></p>
<script>
document.querySelector('#site').addEventListener('change', e => {
const choose = e.currentTarget.selectedIndex;
console.log(choose);
const value = e.currentTarget[choose].value;
if (value) {
//window.open() : 파라미터로 전달된 URL을 새로운 탭으로 여는 함수
console.log(value);
window.open(value);
}
});
//input요소의 change이벤트는 입력 후 포커스가 빠져 나왔을 때 동작함
document.querySelector("#src").addEventListener('change', e => {
document.querySelector('#dsc').value = e.currentTarget.value;
});
//실시간으로 키 입력을 감지하기 위해서는 keyup이벤트 사용
document.querySelector('#keycheck').addEventListener('keyup', e => {
document.querySelector('#keycode').innerHTML = e.currentTarget.value;
})
</script>
</body>
</html>
냠소현 개발일지