[HTML] Select 문 값을 선택하면 지정된 URL 로 이동하기


[HTML] Select 문 값을 선택하면 지정된 URL 로 이동하기




최초 작성일 : 2023-05-10 | 수정일 : 2023-05-10 | 조회수 : 394

HTML의 <select> 태그와 <option> 태그를 사용하여 선택 옵션을 만들 수 있으며, JavaScript의 location.href 속성을 사용하여 특정 URL로 이동할 수 있습니다.

다음은 <select> 태그에서 옵션을 선택하면 특정 URL로 이동하는 HTML 코드입니다:

html
<select id="select-box" onchange="location.href = this.value;">
   <option value="">Choose an option</option>
   <option value="https://www.example.com">Option 1</option>
   <option value="https://www.example.com/page2">Option 2</option>
   <option value="https://www.example.com/page3">Option 3</option>
</select>

위 코드에서 onchange 이벤트 핸들러는 선택된 옵션의 value 속성을 location.href에 할당하여 선택한 옵션에 해당하는 URL로 이동합니다. <option> 태그의 value 속성은 선택할 수 있는 옵션의 값을 지정합니다.

위 코드에서는 "Choose an option" 텍스트를 표시하기 위해 value 속성이 빈 문자열인 첫 번째 옵션을 추가하였습니다. id 속성을 사용하여 JavaScript에서 이 <select> 태그를 참조할 수 있습니다.

위 코드를 실행하면 사용자가 옵션을 선택하면 선택한 옵션에 지정된 URL로 이동합니다. 이와 같이 HTML의 <select> 태그와 JavaScript의 location.href 속성을 결합하여 쉽게 선택 옵션에서 URL로 이동할 수 있습니다.

닉네임:
댓글내용:
🚀 추천글
새글

애플컴퓨터 신제품, 2025년 출시될 최신 정보 총정리!
2025-08-23
  • 애플컴퓨터
  • 애플 신제품
  • 2025년 출시
애플컴퓨터 신제품, 2025년 기대작 총정리!
2025-08-22
  • 애플컴퓨터
  • 2025년 신제품
  • 맥북 프로
애플컴퓨터 신제품, 2025년 최신 소식 총정리!
2025-08-21
  • 애플컴퓨터
  • 2025년 신제품
  • 아이폰 17
애플컴퓨터 최신 소식: M4 칩 성능 폭발! 🚀
2025-08-20
  • M4 칩
  • 애플 M4
  • 애플 신제품
애플컴퓨터 최신 M5 칩 성능 '깜짝'!
2025-08-20
  • 애플 M5 칩
  • M5 칩 성능
  • 애플 실리콘
추천글
카슈미르, 전쟁의 불씨: 국제적 긴장의 중심에서의 갈등 분석
2025-08-20
  • 카슈미르분쟁
  • 인도파키스탄
  • 카르길전쟁




📸 이미지 프롬프트 복사 완료!
이제 어떤 이미지 생성 도구로 이동하시겠어요?
🧠 ImageFX 🧪 Whisk