본문 바로가기

강좌/jQuery

제이쿼리(jQuery) - jQuery 선택기 설명 2 (패스워드 일치)

1. 패스워드가 일치하면 통과하는 로직

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

<meta http-equiv="content-type" content="text/html;" charset="utf-8" >

        <title> jquery </title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<script>

   $(document).ready(function (){

//lblError 레이어 클리어

$('#txtPassword').keyup(function (){

   $('#lblError').text('');//제거

});

//암호 확인 기능 구현

$('#txtPasswordc').keyup(function(){

   if($('#txtPassword').val() != $('#txtPasswordc').val()){

$('#lblError').text('');

$('#lblError').html("<b>값이 틀립니다.</b>");

}else{

$('#lblError').text('');

$('#lblError').text("값이 맞습니다.");

}

});


});

</script>

    </head>


    <body>

<table style="border:1px solid skyblue;">

   <tr>

   <td>

   암호:

</td>

<td>

<input type="password" id="txtPassword" size="20">

</td>

</tr>

   <tr>

   <td>

   암호확인:

</td>

<td>

<input type="password" id="txtPasswordc" size="20">

</td>

</tr>

</table>

<div id="lblError">

암호를 입력하시오.

</div>

    </body>

</html>



2. 드롭다운리스트 선택한 값 가져오기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
        <title> jquery </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
   $(document).ready(function (){
   //콤보박스가 변경될때
$('#lst').change(function(){
   //선택된 드롭다운리스트 값 텍스트박스에 출력
//var selectedText = $("#lst option:selected").text();//방법1
//var selectedText = $("option:selected").text();//방법2
var selectedText = $(":selected").text();//방법3(드롭다운이 하나만 있다면)

$('#txt').val(selectedText);
});
});
</script>
    </head>

    <body>
<select id="lst">
   <option>JAVA</option>
   <option>C</option>
   <option>C++</option>
</select>
<input type="text" id="txt">
</body>
</html>