선택 값 출력(getElement~, querySelector)

2024년 08월 02일

chantleman
작성자
2024.08.02.:41

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <select id="">
            <option value="-">선택하세요</option>
            <option value="부가티">부가티</option>
            <option value="제네시스g80">제네시스g80</option>
            <option value="티코">티코</option>
            <option value="마세라티">마세라티</option>
            <option value="람보르기니">람보르기니</option>
        </select>
        <button onclick="chk()">선택</button>

        <script>
            function chk(){
                var sel1 = document.getElementsByTagName('select');
                var sel2 = document.querySelector('select'); 

                alert(sel1[0].value); 
                alert(sel2.value);
            }

        </script>
    </body>
    </html>

getElementsByTagName은 배열 항목을 제공해서

출력할 때 명확한 값을 지정해야 합니다.

그래서 sel1[0].value로 값을 출력했고

querySelector는 단일 항목을 제공하기 때문에

그냥 sel2.value로 하면 결과가 잘 출력됩니다.

ID로 접근하는 법

    <select id="sel">
        <option value="-">선택하세요</option>
        <option value="부가티">부가티</option>
        <option value="제네시스g80">제네시스g80</option>
        <option value="티코">티코</option>
        <option value="마세라티">마세라티</option>
        <option value="람보르기니">람보르기니</option>
    </select>
    <button onclick="chk()">선택</button>

    <script>
        function chk(){
            var sel3 = document.getElementById('sel');
            var sel4 = document.querySelector('#sel');
            alert(sel3.value);
            alert(sel4.value);
        }

getElementById를 사용할 때는 그냥 sel을 입력하면 되고,

querySelector를 사용할 때는 #sel을 입력하면 됩니다.

input태그는 checked옵션 사용

select 태그는 selected 옵션 사용

	<body>
        여자<input type="radio" name="gender" value="female" checked>
        남자<input type="radio" name="gender" value="male">
        <button onclick="f_radio()">선택</button>

        <script>       
            function f_radio(){
                var info=document.getElementsByName('gender');
                for(var i=0;i<info.length;i++)
                {
                    var result="";
                    if(info[i].checked)
                    {
                        result+=info[i].value;
                        alert(result);
                    }
                }
            }
        </script>
    </body>

	<body>
        <select id="sel" multiple size="5">
            <option value="부가티">부가티</option>
            <option value="제네시스g80">제네시스g80</option>
            <option value="티코">티코</option>
            <option value="마세라티">마세라티</option>
            <option value="람보르기니">람보르기니</option>
        </select>
        <button onclick="chk()">선택</button>

        <script>
            function chk(){
                var opts = document.getElementsByTagName("option");
                var opts2 = document.querySelectorAll("option");
                var list="";
                var cnt=0;
                for(var i =0;i<opts.length;i++)
                {
                    if(opts[i].selected)
                    {
                        if(cnt>0) list+=",";
                        list+=opts[i].value;
                        cnt++;
                    }
                }
                alert(list);
            }
        </script>
    </body>

728x90

'js' 카테고리의 다른 글

css2 (0)	2024.08.05
css (0)	2024.08.02
데이터 전달, post, get (0)	2024.08.01
script (1)	2024.08.01
html form 양식 (0)	2024.07.31

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바