미술관 및 박물관 링크
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>미술관 및 박물관 링크</h1>
<select id="links" onchange="golink()">
<option>대상을 선택</option>
<option value="https://sema.seoul.go.kr/">・서울시립미술관</option>
<option value="https://www.sac.or.kr/">・국립현대미술관</option>
<option value="https://www.museum.go.kr/">・예술의전당</option>
<option value="https://museum.seoul.go.kr/">・국립중앙박물관</option>
<option value="https://museum.seoul.go.kr/">・서울역사박물관</option>
<option value="https://www.nfm.go.kr/">・국립민속박물관</option>
</select>
<script type="text/javascript">
function golink() {
// select index 번호 구하기
let selectIndex = document.getElementById("links").selectedIndex;
// 선택된 index value값 가져오기
let url = document.getElementById("links").options[selectIndex].value;
if(selectIndex != 0){
location.href = url;
}
}
</script>
</body>
</html>
설명
option을 선택할 때 onchange 이벤트가 발생하여 golink함수로 이동한다.
select태그의 id명으로 option의 index번호를 구한다.
index번호로 option의 value값(링크)을 구한다.
location.href 사용하여 클릭 링크로 이동한다.