자바스크립트 콤보박스(드롭다운 메뉴) 값 가져오기와 변경하기

자바스크립트 콤보박스(드롭다운 메뉴) 값 가져오기와 변경하기

드롭다운 메뉴는 사용자에게 여러 옵션 중 하나를 선택할 수 있는 간편한 방법을 제공합니다. 이번 글에서는 예제로 자바스크립트를 사용하여 콤보박스(드롭다운 메뉴)에서 선택된 값을 가져오고 변경하는 방법에 대해서 알아보겠습니다.

1. 콤보박스(드롭다운 메뉴) 값 가져오기

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>자바스크립트로 콤보박스(드롭다운 메뉴) 값 가져오기</title>
</head>
<body>
     <h3>addEventListener 메서드 사용</h3>
     <select id="fruits">
     <option value="apple">사과</option>
     <option value="banana">바나나</option>
     <option value="orange">오렌지</option>
     </select>

     <h3>onchange 이벤트 사용</h3>
     <select id="fruits2" onchange="getSelectedValue()">
     <option value="apple">사과</option>
     <option value="banana">바나나</option>
     <option value="orange">오렌지</option>
     </select>
     
     <script>
     
     // 예제1: addEventListener 메소드 사용
     fruits.addEventListener("change", () => {
     const fruits = document.getElementById("fruits");
     const selectedValue = fruits.value;
     const selectedIndex = fruits.selectedIndex;
     const selectedText = fruits.options[selectedIndex].text;

     console.log(`선택된 값: ${selectedValue}`);
     console.log(`선택된 텍스트: ${selectedText}`);
     });

     // 예제2: onchange 이벤트 사용
     function getSelectedValue() {
     const fruits2 = document.getElementById("fruits2");
     const selectedValue = fruits2.value;
     const selectedIndex = fruits2.selectedIndex;
     const selectedText = fruits2.options[selectedIndex].text;

     console.log(`선택된 값: ${selectedValue}`);
     console.log(`선택된 텍스트: ${selectedText}`);
     }
     
     </script>
</body>
</html>

2. 실행 결과 화면

콤보박스(드롭다운 메뉴) 값 가져오기 예제 실행 결과 화면입니다.

2. 콤보박스(드롭다운 메뉴) 값 변경하기

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>자바스크립트로 콤보박스(드롭다운 메뉴) 값 변경하기</title>
</head>
<body>
     <select id="fruits">
     <option value="apple">사과</option>
     <option value="banana">바나나</option>
     <option value="orange">오렌지</option>
     </select>

     <script>
     function changeSelectedValue(value) {
     fruits.value = value;
     }
     </script>

     <h2>콤보박스 값을 변경하기</h2>
     <button onclick="changeSelectedValue('apple')">사과 선택</button>
     <button onclick="changeSelectedValue('banana')">바나나 선택</button>
     <button onclick="changeSelectedValue('orange')">오렌지 선택</button>

</body>
</html>


2. 실행 결과 화면

콤보박스(드롭다운 메뉴) 값 변경하기 예제 실행 결과 화면입니다.

관련 이전 게시물

  1. HTML 폼과 자바스크립트: 기본 form 태그 사용법
  2. 자바스크립트로 input, textarea 값 가져오기와 넘기기
  3. 바스크립트 체크박스, 라디오 버튼 체크된 값 가져오기
  4. 자바스크립트로 체크박스 전체 선택/해제하는 여러 사용 예제
  5. HTML select, option, optgroup 태그 – 콤보(셀렉트) 박스
위로 스크롤