UX·UI - FrontEnd Dev. Story

프론트엔드/HTML

[HTML] <select> 태그에 링크걸기

클로이겅쥬 2021. 1. 4. 17:34
반응형

1. <select> 그룹 태그에 링크 넣기


 

 

예시 01) <select>박스 링크 걸기 예시 02) <select>그룹박스 링크 걸기



<select> 태그는 예시 01 처럼 리스트로 만들 수 있고 예시 02처럼 그룹화 리스트를 만들 수 있다.

 

 

 

 

 

 

● 그럼, <select> 리스트에 링크를 거는 방법은?

 

<select name="none" onchange="window.open(value,'_blank');">
     <option value="none" >------ 관련 사이트 ------</option>
          <optgroup label="그룹001">
                <option value="http://kosen21.org">코센(KOSEN)</option>
                <option value="https://www.nkis.re.kr:4445">국가정책연구포털(NKIS)</option>
                <option value="http://www.eaerweb.org">East Asian Economic Review</option>
          </optgroup>
          <optgroup label="그룹002">
                <option value="http://www.kisti.re.kr">한국과학기술정보연구원</option>
                <option value="http://www.nrc.re.kr">경제인문사회연구회</option>
                <option value="http://www.kiep.go.kr">대외경제정책연구원</option>
          </optgroup>
      <option value="http://www.google.com">구글</option>
      <option value="http://www.naver.com">네이버</option>
      <option value="http://www.daum.net">다음</option>
</select>

 

<select> 태그에 window.open(value,'_blank'); 넣어주고 <option>에 value="링크 주소" 입력하면 된다.

 

반응형