2023-05-10 276 View 공개 |
HTML의 <select> 태그와 <option> 태그를 사용하여 선택 옵션을 만들 수 있으며, JavaScript의 location.href 속성을 사용하여 특정 URL로 이동할 수 있다. 다음은 <select> 태그에서 옵션을 선택하면 특정 URL로 이동하는 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로 이동할 수 있다.
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로 이동할 수 있다.