<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>Study</title>
<style>
*{margin:0;padding:0; list-style: none; }
.comp{padding:30px;}
.comp .listWrap{margin-top:30px;}
.comp .listWrap li{margin:5px 0; width:100px; height:50px; background:gray; }
.comp .listWrap li.active{background:pink;}
</style>
<!-- <script src="./js/selectbox.js"></script> -->
<script>
const selectMenu = function(compDom){
const selectDom = compDom.querySelector('.job');
const liDom = compDom.querySelector('.listWrap');
// ex1) init 을 메서드로 만들경우
// this.init = function(){
// setChange();
// }
init();
function init(){
setChange();
}
function setChange(){
selectDom.addEventListener('change',onChangeHandler);
}
function onChangeHandler (e) {
targetReset();
targetLiChange(e.target.value);
}
function targetLiChange(targetValue){
if (!!targetValue) {
const targetLi = liDom.querySelector(`.${targetValue}`);
targetLi.classList.add('active');
}
}
function targetReset(){
liDom.querySelectorAll('li').forEach((list)=>{
list.classList.remove('active');
});
}
}
</script>
<script>
window.onload = function () {
const selectMenu_1 = new selectMenu(document.getElementById('comp'));
// ex1) init 을 메서드로 만들경우
//selectMenu_1.init();
}
</script>
</head>
<body>
<div id="wrap">
<div id="comp" class="comp">
<select name="job" class="job">
<option value="">직업선택</option>
<option value="targetLi1">학생</option>
<option value="targetLi2">회사원</option>
<option value="targetLi3">마피아</option>
<option value="targetLi4">군인</option>
</select>
<ul class="listWrap">
<li class="targetLi1">targetLi1</li>
<li class="targetLi2">targetLi2</li>
<li class="targetLi3">targetLi3</li>
<li class="targetLi4">targetLi4</li>
</ul>
</div>
</div>
</body>
</html>
박문