목차
- val() 예제 - <input> 필드의 값을 설정
- val() 정의
- val() 구문
- val() 예제 - wr_1 여분필드 select 값을 wr_10 여분필드에 담기
- val() 예제 - 계산값 자동 입력
- val() 예제 - <input> 경우 반환/설정
- val() 예제 - <select> 경우 반환/설정
- val() 예제 - <textarea> 경우 반환/설정
val() 예제 - <input> 필드의 값을 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("홈짱닷컴 Homzzang.com");
});
});
</script>
<p>사이트: <input type="text" name="site"></p>
<button>입력하기</button>
결과보기
val() 정의
선택요소의 value 속성을 반환/설정.
1.
value 값을 반환하는데 사용되는 경우
처음 일치된 요소의 value 속성의 값을 반환
2.
value 값을 설정하는데 사용되는 경우
모든 일치된 요소의 value 속성의 값을 설정
※ 주로, HTML form 요소와 함께 사용 됨.
val() 구문
반환
$(selector).val()
설정
$(selector).val(value)
함수 이용해 value 속성값 설정
$(selector).val(function(index,currentvalue))
val() 예제 - wr_1 여분필드 select 값을 wr_10 여분필드에 담기
[예제1]
$('#wr_1').change(function(){
$('#wr_10').val($(this).val());
});
[예제2]
$('#wr_1').change(function(){
$('#wr_10').val($('#wr_1 option:selected').val());
});
[예제3]
$('#wr_1').change(function(){
$('#wr_10').val($('select[name=wr_1]').val());
});
val() 예제 - 계산값 자동 입력
$('#wr_1, #wr_2').on('change', function() {
$('#wr_3').val( Number($('#wr_1').val()) * Number($('#wr_2').val()) )
});
슈와이 님 (170915) https://sir.kr/qa/204273
PS. JS 이용 방법 보기.
val() 예제 - <input> 경우 반환/설정
<script src="https://code.jquery.com/jquery-latest.js"></script>
<input type="text" id="hz" value="홈짱닷컴">
<script>
// 반환 X
var hztext = $('#hz').text(); // 반환X
console.log(hztext);
var hzval = $('#hz').val(); // 반환O
console.log(hzval);
// 설정
$('#hz').text('Homzzang.com'); // 설정X
$('#hz').val('Homzzang.com'); // 설정O
</script>
결과보기
val() 예제 - <select> 경우 반환/설정
[주의] - 값 반환은 잘 되나, 값 설정은 안 됨. text() 메서드로 설정해야 함.
<script src="https://code.jquery.com/jquery-latest.js"></script>
<select id="lang">
<option value="html">html</option>
<option value="css">css</option>
<option value="js" selected>js</option>
</select>
<script>
// 반환
var langval = $('#lang option:selected').val();
console.log(langval); // js
// 설정
$('#lang option:selected').val('javascript'); // 설정X
$('#lang option:selected').text('javascript'); // 설정O
</script>
결과보기
val() 예제 - <textarea> 경우 반환/설정
<script src="https://code.jquery.com/jquery-latest.js"></script>
<textarea id="hz">홈짱닷컴</textarea>
<script>
// 반환
var hzval = $('#hz').val();
console.log(hzval); // 홈짱닷컴
// 설정
$('#hz').val('Homzzang.com'); // 설정 O
</script>
결과보기