티스토리 뷰

jQuery

[jQuery] .val()

.val()

선택한 폼 요소의 속성 값을 설정하거나 반환합니다.


.val()

선택한 폼 요소의 속성 값을 설정하거나 반환합니다.

문법

$("선택자").val();
$("선택자").val("속성");
$("선택자").val("함수");

정의
  • .val() 메서드는 선택한 요소의 속성 값을 가져옵니다.
  • .val() 메서드는 선택한 요소의 속성 값을 변경합니다.
  • .val() 메서드는 선택한 요소의 함수를 설정합니다.

샘플(Sample)

input의 속성 값에 텍스트를 넣어주는 예제입니다.

jquery
$(".choice1 .btn1").click(function() {
    $(".list1 .input").val( $( this ).text() );
});
$(".choice1 .btn2").click(function() {
    $(".list1 .input").val( $( this ).text() );
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
    INPUT :<input type="text" value="클릭하세요!" class="input">
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .input {min-width: 300px; height: 20px; padding: 5px 10px; margin: 10px; background: #f9f9f9; border:1px solid #dbdbdb; font-size: 14px; }
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>속성(Attributes)</h3>
    <div class="list1">
        INPUT :<input type="text" value="클릭하세요!" class="input">
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 input 박스에 글씨를 넣어줍니다.</a>
        <a href="#" class="btn2">클릭하면 input 박스에 두번 째 글씨를 넣어줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").click(function() {
            $(".list1 .input").val( "클릭하세요!" );
        });
        $(".choice1 .btn1").click(function() {
            $(".list1 .input").val( $( this ).text() );
        });
        $(".choice1 .btn2").click(function() {
            $(".list1 .input").val( $( this ).text() );
        });
    </script>

</body>
</html>

샘플(Sample)

셀렉트 메뉴를 선택하고 속성 값을 출력하는 예제입니다.

Sample2

속성(Attributes)

SELECT :

jquery
$(".choice2 .btn1").click(function() {
    $(".list2 .desc").text( $( "#select1" ).val() );
});
html
<h3>속성(Attributes)</h3>
<div class="list2">
    SELECT :
    <select name="select1" id="select1" class="select">
        <option>.attr()</option>
        <option>.prop()</option>
        <option>.removeAttr()</option>
        <option>.removeProp()</option>
        <option>.val()</option>
    </select>
    <p class="desc"></p>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select {color: #fff; height: 36px; min-width: 250px; margin-bottom: 10px; white-space: nowrap; font-size: inherit; border: 0 none; background: #444;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>속성(Attributes)</h3>
    <div class="list2">
        SELECT :
        <select name="select1" id="select1" class="select">
            <option>.attr()</option>
            <option>.prop()</option>
            <option>.removeAttr()</option>
            <option>.removeProp()</option>
            <option>.val()</option>
        </select>
        <p class="desc"></p>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">셀렉트 메뉴를 선택하고 클릭하면 select 박스의 값을 가져옵니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".list2 .desc").text( $( "#select1" ).val() );
        
        $(".choice2 .off1").click(function() {
            $(".list2 .desc").text( $( "#select1" ).val() );
        });
        $(".choice2 .btn1").click(function() {
            $(".list2 .desc").text( $( "#select1" ).val() );
        });
    </script>

</body>
</html>

샘플(Sample)

이메일을 선택하면 텍스트를 넣어주는 예제입니다.

Sample3

이메일주소 입력하기

@
jquery
$( "#user_email3" ).change(function(){
    $("#user_email2").val( $("#user_email3").val() );
});
html
<h3>이메일주소 입력하기</h3>
<div class="form_inline">
    <div class="form_group">
        <label for="user_email1" class="ir_su">이메일 아이디</label>
        <input type="text" id="user_email1" name="user_email1" class="ui_input">
    </div>
    <div class="form_group"> @ </div>
    <div class="form_group">
        <label for="user_email2" class="ir_su">이메일 주소</label>
        <input type="text" id="user_email2" name="user_email2" class="ui_input">
    </div>
    <div class="form_group">
        <label for="user_email3" class="ir_su">메일 선택</label>
        <select id="user_email3" name="user_email3" title="이메일 주소 선택" class="ui_select">
            <option value=""> :: 이메일주소 직접입력 :: </option>
            <option value="naver.com">naver.com</option>
            <option value="nate.com">nate.com</option>
            <option value="gmail.com">gmail.com</option>
            <option value="yahoo.com">yahoo.com</option>
            <option value="hanmail.net">hanmail.net</option>
        </select>
    </div>
</div>
css
.select {color: #fff; height: 36px; min-width: 250px; margin-bottom: 10px; white-space: nowrap; font-size: inherit; border: 0 none; background: #444;}
.form_inline .form_group {display: inline-block; vertical-align: middle;}
.ui_input {border: 1px solid #d9d9d9; width: 200px; height: 26px; font-size: 13px; text-indent: 14px; background: #f8f8f8; vertical-align: middle;}
.ui_select {background: #F8F8F8; height: 32px; border: 1px solid #d9d9d9; padding: 0 5px; border-radius: 0; font-size: 13px;}
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select {color: #fff;height: 36px;min-width: 250px;margin-bottom: 10px;white-space: nowrap;font-size: inherit;border: 0 none;background: #444;}
        .form_inline .form_group {display: inline-block; vertical-align: middle;}
        .ui_input {border: 1px solid #d9d9d9; width: 200px; height: 26px; font-size: 13px; text-indent: 14px; background: #f8f8f8; vertical-align: middle;}
        .ui_select {background: #F8F8F8; height: 32px; border: 1px solid #d9d9d9; padding: 0 5px; border-radius: 0; font-size: 13px;}
        .ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
    </style>
</head>
<body>
   
    <h3>이메일주소 입력하기</h3>
    <div class="form_inline">
        <div class="form_group">
            <label for="user_email1" class="ir_su">이메일 아이디</label>
            <input type="text" id="user_email1" name="user_email1" class="ui_input">
        </div>
        <div class="form_group"> @ </div>
        <div class="form_group">
            <label for="user_email2" class="ir_su">이메일 주소</label>
            <input type="text" id="user_email2" name="user_email2" class="ui_input">
        </div>
        <div class="form_group">
            <label for="user_email3" class="ir_su">메일 선택</label>
            <select id="user_email3" name="user_email3" title="이메일 주소 선택" class="ui_select">
                <option value=""> :: 이메일주소 직접입력 :: </option>
                <option value="naver.com">naver.com</option>
                <option value="nate.com">nate.com</option>
                <option value="gmail.com">gmail.com</option>
                <option value="yahoo.com">yahoo.com</option>
                <option value="hanmail.net">hanmail.net</option>
            </select>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $( "#user_email3" ).change(function(){
            $("#user_email2").val( $("#user_email3").val() );
        });
    </script>

</body>
</html>

샘플(Sample)

셀렉트 메뉴 선택하면 해당 주소로 이동하는 예제입니다.

Sample4

셀렉트 메뉴 선택하기

jquery
 $("#address").change(function(){
    var url = $(this).val();
    if(url){
        location.href= url;
    }
});
html
<h3>셀렉트 메뉴 주소로 바로 이동하기</h3>
<div class="address">
    <select name="select1" id="address" class="select">
        <option value="https://www.naver.com/">네이버</option>
        <option value="https://www.daum.net/">다음</option>
        <option value="https://www.nate.com/">네이트</option>
        <option value="https://www.google.co.kr/">구글</option>
    </select>
</div>
css
.select {color: #fff;height: 36px;min-width: 250px;margin-bottom: 10px;white-space: nowrap;font-size: inherit;border: 0 none;background: #444;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select {color: #fff; height: 36px; min-width: 250px; margin-bottom: 10px; white-space: nowrap; font-size: inherit; border: 0 none; background: #444;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>셀렉트 메뉴 주소로 바로 이동하기</h3>
    <div class="address">
        <select name="select1" id="address" class="select">
            <option value="https://www.naver.com/">네이버</option>
            <option value="https://www.daum.net/">다음</option>
            <option value="https://www.nate.com/">네이트</option>
            <option value="https://www.google.co.kr/">구글</option>
        </select>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $("#address").change(function(){
            var url = $(this).val();
            if(url){
                location.href= url;
            }
        });
</script>

</body>
</html>

샘플(Sample)

폰트를 선택하는 예제입니다.

Sample5

금속을 활용한 기획 및 디자인 굿즈를 주로 제작하지만 다양한 분야와의 협업 및 프로젝트를 진행하기도 한다. 2016년 을지로에 자리 잡은 이후에는 직접 디자인한 제품들을 지역 내 소공장에서 제작하는 '을지생산'이라는 제품 디자인 프로젝트를 진행하고 있다.
Design is the creation of a plan or convention for the construction of an object, system or measurable human interaction (as in architectural blueprints, engineering drawings, business processes, circuit diagrams, and sewing patterns).[1] Design has different connotations in different fields (see design disciplines below). In some cases, the direct construction of an object (as in pottery, engineering, management, coding, and graphic design) is also considered to use design thinking.

jquery
$("#font").change(function(){
    $(".font .desc").css("font-family",$(this).val());
});
html
<h3>폰트 선택하기</h3>
<div class="font">
    <select name="select1" id="font" class="select">
        <option value="'Nanum Gothic','나눔고딕'">나눔고딕</option>
        <option value="'Nanum Myeongjo','나눔명조'">나눔명조</option>
        <option value="'Malgun Gothic','맑은고딕'">맑은고딕</option>
        <option value="dotum,'돋움'">돋움</option>
        <option value="gulim,'굴림'">굴림</option>
        <option value="Gungsuh,'궁서'">궁서</option>
    </select>
    <p class="desc">금속을 활용한 기획 및 디자인 굿즈를 주로 제작하지만 다양한 분야와의 협업 및 프로젝트를 진행하기도 한다. 2016년 을지로에 자리 잡은 이후에는 직접 디자인한 제품들을 지역 내 소공장에서 제작하는 '을지생산'이라는 제품 디자인 프로젝트를 진행하고 있다. <br>
    Design is the creation of a plan or convention for the construction of an object, system or measurable human interaction (as in architectural blueprints, engineering drawings, business processes, circuit diagrams, and sewing patterns).[1] Design has different connotations in different fields (see design disciplines below). In some cases, the direct construction of an object (as in pottery, engineering, management, coding, and graphic design) is also considered to use design thinking.</p>
</div>
css
.select {color: #fff;height: 36px; min-width: 250px; margin-bottom: 10px; white-space: nowrap; font-size: inherit; border: 0 none; background: #444;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select {color: #fff; height: 36px; min-width: 250px; margin-bottom: 10px; white-space: nowrap; font-size: inherit; border: 0 none; background: #444;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>폰트 선택하기</h3>
    <div class="font">
        <select name="select1" id="font" class="select">
            <option value="'Nanum Gothic','나눔고딕'">나눔고딕</option>
            <option value="'Nanum Myeongjo','나눔명조'">나눔명조</option>
            <option value="'Malgun Gothic','맑은고딕'">맑은고딕</option>
            <option value="dotum,'돋움'">돋움</option>
            <option value="gulim,'굴림'">굴림</option>
            <option value="Gungsuh,'궁서'">궁서</option>
        </select>
        <p class="desc">금속을 활용한 기획 및 디자인 굿즈를 주로 제작하지만 다양한 분야와의 협업 및 프로젝트를 진행하기도 한다. 2016년 을지로에 자리 잡은 이후에는 직접 디자인한 제품들을 지역 내 소공장에서 제작하는 '을지생산'이라는 제품 디자인 프로젝트를 진행하고 있다. <br>
        Design is the creation of a plan or convention for the construction of an object, system or measurable human interaction (as in architectural blueprints, engineering drawings, business processes, circuit diagrams, and sewing patterns).[1] Design has different connotations in different fields (see design disciplines below). In some cases, the direct construction of an object (as in pottery, engineering, management, coding, and graphic design) is also considered to use design thinking.</p>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $("#font").change(function(){
            $(".font .desc").css("font-family",$(this).val());
        });
    </script>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼