Blog Content

    티스토리 뷰

    32.jQuery - Val ( 03.Attributes - 06.Val.htm )

    반응형
    실제 값이 DB에 저장될 때 ,(콤마)를 구분하여 값을 넣고 이 값을 다시 세팅

    06.Val.htm

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title> 요소의 가져오기 설정</title>

        <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>   

        <script type="text/javascript">

            $(document).ready(function() {

     

                //[4] Init초기값 세팅

                $('#txtName').val("Godffs");

                $('input:radio').val(['F']); //input 타입중 라디오에 대해서 값을 F 설정

                $('#lstFavorites').val(['0', '2']);

     

                $('#btnOK').click(function() {

                    var msg = "";

                    //[1] 텍스트에 입력한 읽어오기

                    msg += $('#txtName').val() + '\n';

     

                    //[2] 채크된 값을 읽어오기

                    msg += $('input:radio[name=Gender]:checked').val() + '\n';

     

                    //[3] 리스트박스에서 여러개 가져오기

                    //msg += $('#lstFavorites').val() + '\n';

                    msg += $('#lstFavorites').val().join(" | ") + '\n'; // 새로운 구분자를 넣기

     

                    //[!]

                    alert(msg);

                });

            });

        </script>

    </head>

    <body>

     

        텍스트박스 : <input type="text" id="txtName" /><br />

        라디오버튼 :

        <input type="radio" id="optGender1" name="Gender" value="M" />

        <input type="radio" id="optGender2" name="Gender" value="F" /><br />

       

        드롭다운리스트 :

        <select id="lstFavorites" multiple="multiple" size="3">

        <option value="0">JavaScript</option>

        <option value="1">jQuery</option>

        <option value="2">Prototype</option>

        </select><br />

       

        <input type="button" value="확인" id="btnOK" />

       

    </body>

    </html>


    결과화면

    [그림32-1]



    반응형

    Comments