HOWTO · jQuery
jQuery를 사용하여 변경 이벤트에서 선택한 드롭다운 값을 가져오는 방법
이 튜토리얼은 jQuery를 사용하여 드롭다운의 선택된 값을 변경할 때 특정 기능을 수행하는 방법을 보여줍니다.
이 페이지의 내용
jQuery 변경 핸들러를 사용하면 드롭다운 선택이 변경된 후 코드를 실행할 수 있습니다. 핸들러 내부에서는 this.value로 선택한 옵션을 읽은 다음, 그 값을 사용해 페이지를 업데이트하거나 다른 작업을 수행합니다. 아래 예제는 각 옵션을 배경색에 매핑합니다.
change() 메서드를 사용하여 jQuery의 변경 이벤트에서 선택한 드롭다운 값 가져오기
jQuery에서 change는 이벤트 이름입니다. change()는 단축 메서드로, 이벤트에 응답하는 코드를 바인딩할 핸들러를 전달합니다. 핸들러 없이 .change()를 호출하면 대신 이벤트가 트리거되며, 핸들러가 등록되지는 않습니다. 드롭다운의 경우, 사용자가 다른 옵션을 선택하면 핸들러가 실행됩니다.
이것은 브라우저 페이지 예제이며 실행되지 않은 상태로 제시되므로, 그 동작은 실행을 통해 관찰된 것이 아니라 설명된 것입니다. 완전한 페이지는 이를 사용하는 코드보다 먼저 jQuery를 로드합니다. select의 value 속성은 핸들러가 읽는 값입니다. 초기 옵션의 값은 0이며, if/else 분기는 0부터 3까지를 네 가지 CSS 색상 이름에 매핑합니다. 선택한 옵션의 값은 문자열이므로, 비교에서는 따옴표로 묶인 값을 사용합니다. 선택을 변경하면 #Main div의 배경색이 업데이트되며, 그 텍스트와 테두리는 그대로 유지됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown change with jQuery change()</title>
<style>
#Main {
border: 5px solid green;
background-color: lightblue;
min-height: 100px;
padding: 1rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#bgcolor").change(function () {
var bgcolor = this.value;
if (bgcolor === "0") {
$("#Main").css("background-color", "lightblue");
} else if (bgcolor === "1") {
$("#Main").css("background-color", "lightgreen");
} else if (bgcolor === "2") {
$("#Main").css("background-color", "lightpink");
} else {
$("#Main").css("background-color", "lightgrey");
}
});
});
</script>
</head>
<body>
<div id="Main">
<h1>Delftstack.com</h1>
<label for="bgcolor">Background color:</label>
<select name="bgcolor" id="bgcolor">
<option value="0">Blue</option>
<option value="1">Green</option>
<option value="2">Pink</option>
<option value="3">Grey</option>
</select>
</div>
</body>
</html>
페이지가 로드되면 첫 번째 옵션이 선택되어 있으므로 패널은 연한 파란색으로 시작합니다. 이후의 각 선택은 바인딩된 핸들러를 호출하고 일치하는 색상을 적용합니다. 색상 할당을 메시지 업데이트나 표시된 결과 필터링과 같이 페이지에 필요한 작업으로 교체하세요. 값을 읽으려는 select에 핸들러를 계속 연결해 두세요.
on() 메서드를 사용하여 jQuery의 변경 이벤트에서 선택한 드롭다운 값 가져오기
이벤트 이름과 콜백을 전달하여 동일한 핸들러를 on()으로 바인딩할 수 있습니다: $(selector).on('change', handler). 여기서 change는 이벤트 이름이고 함수는 핸들러입니다. 선택자는 핸들러를 받는 요소를 식별합니다. 이 직접적인 드롭다운 예제에서는 자식 선택자, 데이터 및 이벤트 맵 인수가 필요하지 않습니다.
이 두 번째 브라우저 페이지 예제 역시 실행되지 않은 상태로 제시됩니다. 아래 페이지는 완전하며 change() 예제와 동일한 옵션, ID 및 색상 매핑을 사용합니다. on('change', ...)를 사용해 콜백을 등록한 다음, this.value에서 선택한 옵션을 읽습니다. on()의 명시적인 이벤트 및 핸들러 구조를 원할 때 이 형태를 사용하세요. 표시되는 결과는 동일한 배경색 업데이트입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown change with jQuery on()</title>
<style>
#Main {
border: 5px solid green;
background-color: lightblue;
min-height: 100px;
padding: 1rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#bgcolor").on("change", function () {
var bgcolor = this.value;
if (bgcolor === "0") {
$("#Main").css("background-color", "lightblue");
} else if (bgcolor === "1") {
$("#Main").css("background-color", "lightgreen");
} else if (bgcolor === "2") {
$("#Main").css("background-color", "lightpink");
} else {
$("#Main").css("background-color", "lightgrey");
}
});
});
</script>
</head>
<body>
<div id="Main">
<h1>Delftstack.com</h1>
<label for="bgcolor">Background color:</label>
<select name="bgcolor" id="bgcolor">
<option value="0">Blue</option>
<option value="1">Green</option>
<option value="2">Pink</option>
<option value="3">Grey</option>
</select>
</div>
</body>
</html>
두 접근 방식 모두 핸들러를 change 이벤트에 바인딩합니다. 어느 쪽도 별도의 버튼 클릭을 기다리지 않습니다. 첫 번째 형태는 jQuery 단축 형태인 반면, on()은 이벤트와 콜백을 별도의 인수로 지정합니다. 주어진 select에 대해 바인딩을 하나 선택하면 선택이 변경될 때마다 작업이 한 번 실행됩니다. 핸들러가 실행되지 않는 것처럼 보이면, jQuery가 ready 콜백보다 먼저 로드되었는지, 선택자가 select의 ID와 일치하는지, 콜백이 값이 필요한 요소에 바인딩되었는지 확인하세요. 배경색을 업데이트하는 페이지는 단지 예시일 뿐입니다. 동일한 this.value로 콜백 내부에서 애플리케이션에 특화된 어떤 작업도 수행할 수 있습니다.
