jQuery를 사용하여 다중 선택 박스의 값을 출력하는 방법을 알려드리겠습니다. 기본적으로 HTML에서 다중 선택 박스(select 태그와 multiple 속성)를 사용하며 선택된 옵션의 값을 가져올 수 있습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다중 선택 박스 값 출력</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="multiSelectForm">
<label for="fruits">좋아하는 과일을 선택하세요:</label><br>
<select id="fruits" name="fruits" multiple>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="cherry">체리</option>
<option value="date">대추</option>
<option value="elderberry">엘더베리</option>
</select>
<br><br>
<button type="button" id="showSelected">선택된 값 출력</button>
<p id="output"></p>
</form>
<script src="multiSelect.js"></script>
</body>
</html>
jQuery (multiSelect.js)
$(document).ready(function () {
$("#showSelected").on("click", function () {
// 선택된 옵션의 값을 배열로 가져오기
const selectedValues = $("#fruits").val();
// 결과 출력
if (selectedValues && selectedValues.length > 0) {
$("#output").html("선택된 값: " + selectedValues.join(", "));
} else {
$("#output").html("선택된 값이 없습니다.");
}
});
});
설명
- HTML 다중 선택 박스
- <select> 태그에 multiple 속성을 추가하여 여러 옵션을 선택할 수 있게 합니다.
- 각 옵션에 value 속성을 지정하여 선택 시 반환되는 값을 설정합니다.
- jQuery 이벤트 핸들러
- 버튼(#showSelected) 클릭 시, 선택된 옵션의 값을 가져와 출력합니다.
- 값 가져오기
- $("#fruits").val()을 사용하면 선택된 옵션의 값을 배열로 반환합니다.
- 선택된 값이 없는 경우 null을 반환하므로 이를 체크합니다.
- 결과 출력
- 선택된 값을 쉼표(, )로 구분하여 문자열로 출력합니다.
출력 예시
사용자가 사과와 바나나를 선택한 경우
선택된 값: apple, banana
아무 옵션도 선택하지 않은 경우
선택된 값이 없습니다.
위 코드를 응용하여 다양한 기능(예: 선택된 값 서버 전송, 실시간 업데이트 등)을 구현할 수 있습니다.
#jquery #click #event #join #다중선택박스값출력 #select
반응형
'프로그램' 카테고리의 다른 글
| jquery 연관된 필드 자동 업데이트 (0) | 2024.12.07 |
|---|---|
| jquery 파일 업로드 시 선택된 파일 이름 표시 (0) | 2024.12.05 |
| jquery 텍스트 필드 값 변경 시 유효성 검사 (0) | 2024.12.01 |
| jquery 라디오 버튼으로 입력 폼 변경 (0) | 2024.11.29 |
| jquery 체크박스 선택 시 특정 섹션 활성화/비활성화 (0) | 2024.11.27 |
댓글