잡동사니에도 사랑을

[JavaScript] 옵션 선택 후 새 창을 열어 사이트에 접속하는 방법 본문

JAVA_EE/JavaScript

[JavaScript] 옵션 선택 후 새 창을 열어 사이트에 접속하는 방법

luvforjunk 2021. 9. 16. 00:31
728x90
반응형

[21.09.14] practice02(JavaScript) - 옵션 선택 후 새 창을 열어 사이트에 접속하는 방법

 

실행 결과창

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

        function goSite(select){//내가 선택한 옵션의 객체값이 넘어온다

               var index = select.selectedIndex;
               var site = select.options[index].value

               alert(index + ", " + site);

               console.log(index + ", " + site); // console.log 쓸 경우 f12로 확인해야 한다

               window.open(site, "", "left=800, top=200, width=500, height=500");
        }
</script>
</head>
<body>
        <h3>옵션 선택으로 사이트 접속</h3>

        옵션 선택마다 새 윈도우에 접속합니다.

        <hr>

        <select onchange="goSite(this)">

               <option value = "">선택하세요</option>
               <option value = "http://www.google.com">구글</option>
               <option value = "http://www.naver.com">네이버</option>
               <option value = "http://www.daum.net">다음</option>

        </select>
</body>
</html>

 

 

options[target.selectedIndex].text : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다.
options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다.

 

 

네이버 선택 시 뜨는 확인창

 

728x90
반응형

'JAVA_EE > JavaScript' 카테고리의 다른 글

[JavaScript] calc함수(덧셈, 뺄셈)  (0) 2021.09.16
[21.09.14] practice01(JavaScript)  (0) 2021.09.16
[21.09.14] exam26(JavaScript)  (0) 2021.09.14
[21.09.14] exam25(JavaScript)  (0) 2021.09.14
[21.09.14] exam24(JavaScript)  (0) 2021.09.14
'JAVA_EE/JavaScript' Related Articles more