1번 : select 태그에 onclick혹은 onchange를 설정하여
각 옵션의 value값을 받고 그 값에따라 링크를 실행함
<body>
<div style="border: 1px solid blue;">
<h1>미술관 및 박물관의 링크</h1>
아래에서 이동할 미술관을 선택해 주세요
<br>
<!-- onclick과 onchange모두 상관 없음 -->
<select id="selid" name="meChoice" onclick="move()" onchange="golink()">
<option>대상을 선택
<option>-------------
<option value="1">삼성리움 미술관
<option value="2">갤러리현대 미술관
<option value="3">국립현대 미술관
<option value="4">서울시립미술관
</select>
<!-- <input type="button" value="이동" onclick="move()"> -->
<br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
function golink() {
let value = document.getElementById('selid').value;
// alert(value);
if (value=='1') {
location.href = "https://www.leeum.org/html/global/main.asp";
}if (value=='2') {
location.href = "https://www.galleryhyundai.com/main";
}if (value == '3') {
location.href = "https://www.mmca.go.kr/main.do"
}if (value == '4') {
location.href = "https://sema.seoul.go.kr/"
}
}
</script>
</body>
2번
form의 name으로 url로 받아서 location.href = url; 로 바로 실행
<h1>미술관 및 박물관 링크</h1>
<form action="" name="frm">
<select id="links" onchange="golink()" name="links">
<option>대상을 선택</option>
<option>미술관--------</option>
<option value="http://sema.seoul.go.kr">서울 시립 미술관</option>
<option value="http://www.mmca.go.kr">국립 현대 미술관</option>
<option value="http://www.sac.or.kr">예술의 전당</option>
<option>박물관--------</option>
<option value="http://www.museum.go.kr">국립 중앙 박물관</option>
<option value="http://www.museum.seoul.kr">서울 역사 박물관</option>
<option value="http://www.nfm.go.kr">국립 민속 박물관</option>
</select>
</form>
<script type="text/javascript">
function golink() {
/*
let selIndex = document.getElementById('links').selectedIndex;
alert(selIndex);
let url = document.getElementById("links").options[selIndex].value;
alert(url);
*/
let selIndex = document.frm.links.selectedIndex;
let url = document.frm.links.options[selIndex].value;
if(selIndex != 0 && selIndex != 1 && selIndex != 5){
location.href = url;
}
}
</script>
'Java Script > work' 카테고리의 다른 글
| 현재 시각은**입니다 (0) | 2020.07.10 |
|---|---|
| 버튼을 클릭하면 2개의 주사위가 랜덤됩니다. (0) | 2020.07.10 |
| 영어 속담으로 "1일 1개씩 먹으면 의사 필요없다"라고하는 과일은 무엇일까요? (0) | 2020.07.10 |
| 배경색의 변경 (0) | 2020.07.10 |
| 한라산 맞추기 (0) | 2020.07.09 |
