나를 찾는 아이 :: 셀렉트박스 값 변경시 해당 웹사이트 방문하기

분류없음2007/10/31 18:18

셀렉트박스 값 변경시 해당 웹사이트 방문하기

<script type="text/javascript">
function visit(select){
        var url = select.options[select.selectedIndex].getAttribute('value');
        if(url) location.href = url;
}
</script>

<select onchange="visit(this)">
    <option value="http://daum.net">다음</option>
    <option value="http://naver.com">네이버</option>
    <option>이동없음</option>
</select>

사용법은 간단합니다.

select에 onchange 이벤트에 visit(this) 걸어주시고요.

option의 value값에 방문할 사이트 주소를 입력합니다.

~~그냥 이동이 없는 option 의 경우에는 value="" 이렇게 값이 없는 value 속성을 추가해야합니다.~~

IE를 제외한 브라우저에서는 value속성값이 없을 경우 option 의 텍스트를 value값으로 인식합니다.

위와 같은 이유로 onchange에 this.value를 인자로 던지는 종류의 스크립트를 배제합니다.

위의 스크립트는 select라는 UI컴포넌트를 사용하여 좀더 적은 공간에 효율적으로

링크 이동을 하기 위함입니다. 원칙적으로

<form></form>에 select를 구현하고 submit 버튼도 함께 구현하여 자바스크립트가 정상적으로 지원되지 않는 환경을 고려하셔야 합니다.

이올린에 북마크하기(0)

이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이 블로그를 구독하시려면 여기를 클릭해주세요

Posted by 나를찾는아이

TAG JavaScript, 자바스크립트

Trackback 0 Comment 3

TRACKBACK http://trend21c.tistory.com/trackback/278

댓글을 달아 주세요

신현석

많은 웹사이트에서 애용하는 방법이지만, 이 방법은 키보드로 제어가 불가능 하기 때문에 접근성이 좋지 않습니다. 옆에 서밋 버튼을 넣어서 버튼을 클릭 했을 때 이동할 수 있게 하는 것이 좋습니다.
2007/10/31 18:42 [ ADDR : EDIT/ DEL : REPLY ]
- 나를찾는아이
  
  역시 언제나 옳은 말만 해주시는 현석님입니다.
  그런데 디자이너한테 안통하는 경우가 많네요.
  2007/10/31 23:20 [ ADDR : EDIT/ DEL ]
- 신현석
  
  접근성, 사용성 얘기를 하는데 안통한다면, 그 디자이너 공부좀 해야 겠는 걸요?
  2007/11/01 10:13 [ ADDR : EDIT/ DEL ]