select태그에서 value 속성은 선택된 값을 의미
즉 option의 innerHTML과 같음
<!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>
<h4>select에서 value속성은 선택된 값을 의미합니다.</h4>
<h4>change이벤트</h4>
<h1 id="word">단어를 선택하세요</h1>
<select id="sel">
<option>선택</option>
<option>hello</option>
<option>안녕하세요</option>
<option>你好</option>
</select>
<script>
var word = document.getElementById("word");
var sel=document.getElementById("sel");
sel.addEventListener("change",function() {
if(sel.value == 'hello') {
word.innerHTML = '영어입니다.';
}else if (sel.value== '안녕하세요') {
word.innerHTML = '한국어입니다.';
}else if (sel.value == '你好') {
word.innerHTML = '중국어입니다.';
}else if (sel.value == '선택') {
word.innerHTML = '단어를 선택하세요.';
}
});
</script>
</body>
</html>
'JS' 카테고리의 다른 글
| 221230 속성제어 실습4 (0) | 2022.12.30 |
|---|---|
| 221230 JS 속성제어 실습3 (0) | 2022.12.30 |
| 221229 JS DOM,속성제어 실습1 (0) | 2022.12.29 |
| 221229 JS 속성제어 (0) | 2022.12.29 |
| 221229 JS DOM (0) | 2022.12.29 |
