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

관련 이전 게시물
- HTML 폼과 자바스크립트: 기본 form 태그 사용법
- 자바스크립트로 input, textarea 값 가져오기와 넘기기
- 자바스크립트 체크박스, 라디오 버튼 체크된 값 가져오기
- 자바스크립트로 체크박스 전체 선택/해제하는 여러 사용 예제
- HTML select, option, optgroup 태그 – 콤보(셀렉트) 박스
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!