웹마스터 팁
간단한 점프메뉴(selecter)
2003.04.14 07:23
상단에 삽입...
<script language="JavaScript" type="text/JavaScript">
<!--
function go()
{if (document.selecter.select1.options
[document.selecter.select1.selectedIndex].value != "none")
{location = document.selecter.select1.options
[document.selecter.select1.selectedIndex].value
}
}
//-->
</script>
간단한 설명
select의 option내의 value값이 none 일 경우, 이동하지않습니다.
select의 option내의 value값이 경우, 해당페이지로 이동합니다.
여기서 select의 값은 value 값입니다.
그럼 본문에 출력은...
<form name="selecter">
<select name="select1" onchange="go()" >
<option value="http://nzeo.com">엔지오닷컴</option>
<option value="http://kr.yahoo.com">야후</option>
<option value="http://www.naver.com">야후</option>
</select>
</form>
음...onchange 이벤트를 이용해서 이동합니다.
조금만 수정하시면 버튼을 눌러서 이동하게도 할수 있습니다.
예를 들어
버튼 만들고 onclick="go();"만 넣어주시면 되는거조.
<script language="JavaScript" type="text/JavaScript">
<!--
function go()
{if (document.selecter.select1.options
[document.selecter.select1.selectedIndex].value != "none")
{location = document.selecter.select1.options
[document.selecter.select1.selectedIndex].value
}
}
//-->
</script>
간단한 설명
select의 option내의 value값이 none 일 경우, 이동하지않습니다.
select의 option내의 value값이 경우, 해당페이지로 이동합니다.
여기서 select의 값은 value 값입니다.
그럼 본문에 출력은...
<form name="selecter">
<select name="select1" onchange="go()" >
<option value="http://nzeo.com">엔지오닷컴</option>
<option value="http://kr.yahoo.com">야후</option>
<option value="http://www.naver.com">야후</option>
</select>
</form>
음...onchange 이벤트를 이용해서 이동합니다.
조금만 수정하시면 버튼을 눌러서 이동하게도 할수 있습니다.
예를 들어
버튼 만들고 onclick="go();"만 넣어주시면 되는거조.
댓글 14
-
박재현
2003.04.14 08:18
실행화면 : http://infoko.ce.ro -
특급잠수부
2003.04.14 22:27
태클은 아닙니다.
점프메뉴에서 선택만으로 이동하게 하려면
<select name=test onchange="javascript:location.replace(this.value);">
<option value="http://nzeo.com">엔지오닷컴</option>
<option value="http://kr.yahoo.com">야후</option>
<option value="http://www.naver.com">야후</option>
</select>
onchange를 이용하시면 일일히 눌러줄 필요없이 이동됩니다... -
박재현
2003.04.15 07:09
우와...이런방법도 있었구나....감사합니다....좋은거 배웠습니다. -
뒹굴리스트
2003.04.15 08:17
-
박재현
2003.04.15 18:03
ㅎㅎㅎ...
태그 복사하는 바람에...급조하는 바람에....엄청 큰 오타 냈습니다. 지성합니다... -
특급잠수부
2003.04.16 00:14
엇...저도 <option>부분은 복사하는 바람에 -_-
왜 못봤을꼬 -_-;; -
세죠위그이
2003.04.21 12:48
타겟을 지정하려면..? ^^; -
특급잠수부
2003.04.22 00:04
타겟이름.location.replace(this.value); -
배키♪
2003.04.26 01:11
핫! 세죠위그이님 좋은 질문입니다♡
제가 할 뻔 했는데 코멘트 읽다 보니 있군요^-^ㅎㅎ -
BIRDY™
2003.06.07 21:16
<style type="text/css">
<!--
select { font:9pt TTche,verdana,굴림; background-color:#ffccff;color:#000000; width:100px;}
option { font:9pt TTche,verdana,굴림; }
option.01 { background-color:#ff66cc;color:#000000; }
option.02 { background-color:#ff99cc;color:#000000; }
option.03 { background-color:#ffcccc;color:#000000; }
//-->
</style>
<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.1(?)
eval("window.open('"+selObj.options[selObj.selectedIndex].value+"','"+targ+"','')");
if (restore) selObj.selectedIndex=0; }
//-->
</script>
<form name="form1">
<select name="menu1" onChange="MM_jumpMenu('_blank',this,0)">
<option value="null" selected>선택하세요...</option>
<option class="01" value="http://birdy.na.fm">Birdy.na.fm</option>
<option class="02" value="http://birdy.zetyx.net">Birdy.zetyx.net</option>
<option class="03" value="http://birdy.uu.st">Birdy.uu.st</option>
</select>
</form> -
바다 愛
2003.12.12 13:39
오래된 글이라 답을 주실런지 모르겠습니다.
위에 소스에서 "선택하세요..." 요것도 빈페이지로 열리는데
안열리게 할려면 어떻게 해야하는지 궁굼합니다.
value를 빈걸로해도 안되는거 같은뎁쇼 !!! -
지영
2003.12.14 13:37
바다 愛님
저도 그거 때문에 엄청 고민이였는데 제가 실험해봤더니요. 맞는건진 모르겠는데 되긴 하더라구요. 조금이나마 도움이 되셨으면 하는 마음에 올립니다
<option selected>선택하세요...</option>
이렇게 했더니 다른거 선택했다가도 "선택하세요..." 이거 다시 누르더라도 빈페이지 안뜨고
아무런 변화 없던데요 -
바다 愛
2003.12.18 23:00
지영님
답해주셔서 고맙습니다.
근데 전 빈페이지가 뜨는군요 !! -
수견
2004.05.11 17:35
<form>
<select name="test" onChange="window.open(this.options[this.selectedIndex].value,'_self')">
<option>검색엔진
<option value="http://naver.com">네이버
<option value="http://empas.com">엠파스
<option value="http://kr.yahoo.com">야후코리아
<option>음악듣기
<option value="http://bugs.co.kr">벅스
</select>
</form>
-----------------------------------------------------------------
이렇게 하면 value값이 없는 항목은 이동되지 않습니당.^^
끝에 _self는 타겟 지정입니다.
그리고! 주의할건 현재 페이지에서 이동하려면 끝에 </option>으로 막지 마세요! 막은 다음부터 새창뜹니다; 쿨럭
헤매다 찾은거라 기쁜마음에 올려봅니당.:)
