반응형
val() 요소의 값 가져오기, 설정하기
1. 요소의 값 가져오기 (val() 메서드):
val() 메서드는 주로 입력 필드 (input, textarea, select 등)의 값을 가져올 때 사용됩니다. 이 메서드를 사용하여 선택한 요소의 값을 가져올 수 있습니다.
// input 요소의 값을 가져오기
var inputValue = $("#myInput").val();
// select 요소의 선택된 옵션 값을 가져오기
var selectedOptionValue = $("#mySelect").val();
2. 요소의 값 설정하기 (val() 메서드):
val() 메서드를 사용하여 선택한 요소의 값을 설정할 수 있습니다. 이를 통해 사용자 입력을 초기화하거나 동적으로 값을 설정할 수 있습니다.
*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
// input 요소의 값을 설정하기
$("#myInput").val("새로운 값");
// select 요소의 선택된 옵션 값을 설정하기
$("#mySelect").val("option2");반응형
다음은 HTML 폼 요소에서 값을 가져오고 설정하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 값 가져오기 및 설정하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="myInput" value="기본 값">
<select id="mySelect">
<option value="option1">옵션 1</option>
<option value="option2" selected>옵션 2</option>
<option value="option3">옵션 3</option>
</select>
<button id="getValue">값 가져오기</button>
<button id="setValue">값 설정하기</button>
<script>
$(document).ready(function() {
$("#getValue").click(function() {
var inputValue = $("#myInput").val();
var selectedOptionValue = $("#mySelect").val();
alert("입력 필드 값: " + inputValue + "\n선택된 옵션 값: " + selectedOptionValue);
});
$("#setValue").click(function() {
$("#myInput").val("새로운 값");
$("#mySelect").val("option3");
});
});
</script>
</body>
</html>
jQuery를 사용하여 입력 필드와 선택 목록의 값을 가져오고 설정하는 방법을 보여줍니다.
버튼을 클릭하면 값을 가져오거나 설정할 수 있습니다
[Jquery] 요소 사이, 앞, 뒤 에 넣기 append(), appendTo(), prepend(), prependTo(), after(), before(), insertAfter(), inse
jquery 요소 사이, 앞, 뒤 에 넣기 append(), appendTo(), prepend(), prependTo(), after(), before(), insertAfter(), insertBefore() append() - 선택한 요소의 끝에 새로운 내용을 추가합니다. // 예시: 아이템 1 $("#myList").append("
iknowandyouknow.tistory.com
반응형
