728x90
반응형
셀렉트
● label: 이름을 달아주는 태그
for : label 와 select가 세트라고 알려줌
select > option
seleted="selected"지정해서 항상 위에 위치하도록 함
value = ""
밸류값으로 사이트 링크 걸어줌
seleted에 script를 넣어주어야한다.
●onchange= ""
<select id="family" onchange="if(this.value) window.open(this.value);">
<option selected="selected" value="0">Family Map</option>
<option value="https://www.naver.com/">네이버</option>
<option value="https://www.daum.net/">다음</option>
<option value="https://www.google.com/">구글</option>
<option value="https://www.nate.com/">네이트</option>
</select>만약 this에 밸류값이 있으면 윈도우를 오픈해줘라 선택한 아이의 밸류값을;
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패밀리사이트 만들기</title>
<style>
</style>
</head>
<body>
<div class="family">
<label for="family">검색사이트</label>
<select id="family" onchange="if(this.value) window.open(this.value);">
<option selected="selected" value="0">Family Map</option>
<option value="https://www.naver.com/">네이버</option>
<option value="https://www.daum.net/">다음</option>
<option value="https://www.google.com/">구글</option>
<option value="https://www.nate.com/">네이트</option>
</select>
</div>
</body>
</html>
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [JAVASCRIPT]요소 선택하기 (0) | 2023.06.21 |
|---|---|
| 비주얼 스튜디오 코드 42 _ slick, dots, autoplay (0) | 2023.06.21 |
| [JAVASCRIPT]2. 자바스크립트로 스타일 제어하기 (0) | 2023.06.20 |
| 비주얼 스튜디오 코드 40_ 웹표준) 네비게이션 / 배너 (0) | 2023.06.20 |
| 비주얼 스튜디오 코드 39_ 검색창 만들기 (0) | 2023.06.20 |