ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jquery select box 팁
    Programming/javascript 2013. 12. 1. 14:30


    1.셀렉트박스 name 으로 옵션값 가져오기 

    <body>

    <select name="selname1" id="sel1">

    <option value="">선택</option>

    <option value="사과">사과</option>

    <option value="배">배</option>

    <option value="딸기">딸기</option>

    </select>

    <br/>

    <input type="button" name="btn" id="btn1" value="Click">

    </body>

    <script>

    $(document).ready(function() {

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

    alert($('select[name=selname1]').val());

    });

    });

    </script>


    2.셀렉트박스 ID로 선택된 옵션값 가져오기

    <body>

    <select name="selname2" id="sel2">

    <option value="">선택</option>

    <option value="사과">사과</option>

    <option value="배">배</option>

    <option value="딸기">딸기</option>

    </select>

    <br/>

    <input type="button" name="btn" id="btn2" value="Click">

    </body>

    <script>

    $(document).ready(function() {

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

    alert($('#sel2 option:selected').val());

    });

    });

    </script>


    3.셀렉트박스 선택된 위치 알아내기

    <body>

    <select name="selname3" id="sel3">

    <option value="">선택</option>

    <option value="사과">사과</option>

    <option value="배">배</option>

    <option value="딸기">딸기</option>

    </select>

    <br/>

    <input type="button" name="btn" id="btn3" value="Click">

    </body>

    <script>

    $(document).ready(function() {

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

    var index = $("#sel3 option").index($("#sel3 option:selected"));

    alert(index + '번째 위치');

    });

    });

    </script>


    4.셀렉트박스 옵션값으로 selected 하기

    <body>

    <select name="selname4" id="sel4">

    <option value="">선택</option>

    <option value="사과">사과</option>

    <option value="배">배</option>

    <option value="딸기">딸기</option>

    </select>

    <br/>

    <input type="button" name="btn" id="btn4" value="Click">

    </body>

    <script>

    $(document).ready(function() {

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

    $('#sel4').val('딸기');

    });

    });

    </script>


    5.셀렉트박스 옵션값 추가하기 

    <body>

    <select name="selname5" id="sel5">

    <option value="">선택</option>

    <option value="사과">사과</option>

    <option value="배">배</option>

    <option value="딸기">딸기</option>

    </select>

    <br/>

    <input type="button" name="btn" id="btn5" value="Click">

    </body>

    <script>

    $(document).ready(function() {

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

    $('#sel5').append('<option value="귤">귤</option>');

    });

    });

    </script>


    6.셀렉트박스 변경시에 이벤트 사용하기

    <body>

    <select name="selname6" id="sel6">

    <option value="">선택</option>

    <option value="사과">사과</option>

    <option value="배">배</option>

    <option value="딸기">딸기</option>

    </select>

    </body>

    <script>

    $(document).ready(function() {

    $('#sel6').change(function() {

    alert($(this).val());

    alert($(this).children('option:selected').text());

    });

    });

    </script>

    'Programming > javascript' 카테고리의 다른 글

    javascript 변수  (0) 2020.06.01
    jQuery 에서 json 데이타를 읽어오는 방법  (1) 2013.12.11
    jquery checkbox 팁  (0) 2013.12.01
    자바스크립트 객체를 생성하는 5가지 방법  (0) 2013.08.13
    자바스크립트 함수  (0) 2013.07.29

    댓글

Designed by Tistory.