ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [jQuery]select박스
    IT 2017.04.26 19:42


    Selectbox

    셀렉트박스의 모든것.



    셀렉트박스나 체크박스나 사용할 때 일단 구글링.
    아는것도 생각이 잘 안나서 맨날 구글링을 함.
    근데 진짜 셀렉트박스사전같은 대박 사이트를 찾아냄.


    셀렉트박스로 할 수 있는 거의 모든것이 적혀있다.


    원본사이트는 저 위의 사이트이고

    어떤 분이 또 잘 정리해둔 사이트가 있다.


    아래의 내용은 거기서 퍼온것이고

    해당 블로그주소는 요기요기요기요. http://egloos.zum.com/tiger5net/v/5667935



    1. jQuery로 선택된 값 읽기

     

    $("#selectBox option:selected").val();

    $("select[name=name]").val();

     

    2. jQuery로 선택된 내용 읽기

     

    $("#selectBox option:selected").text();

     

    3. 선택된 위치

     

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

     

    4. Add options to the end of a select

     

    $("#selectBox").append("<option value='1'>Apples</option>");

    $("#selectBox").append("<option value='2'>After Apples</option>");

     

    5. Add options to the start of a select

     

    $("#selectBox").prepend("<option value='0'>Before Apples</option>");

     

    6. Replace all the options with new options

     

    $("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>MoreOranges</option>");

     

    7. Replace items at a certain index

     

    $("#selectBox option:eq(1)").replaceWith("<option value='2'>Someapples</option>");

    $("#selectBox option:eq(2)").replaceWith("<option value='3'>Somebananas</option>");

     

    8. 지정된 index값으로 select 하기

     

    $("#selectBox option:eq(2)").attr("selected", "selected");

     

    9. text 값으로 select 하기

     

    $("#selectBox").val("Someoranges").attr("selected", "selected");

     

    10. value값으로 select 하기

     

    $("#selectBox").val("2");

     

    11. 지정된 인덱스값의 item 삭제

     

    $("#selectBox option:eq(0)").remove();

     

    12. 첫번째 item 삭제

     

    $("#selectBox option:first").remove();

     

    13. 마지막 item 삭제

     

    $("#selectBox option:last").remove();

     

    14. 선택된 옵션의 text 구하기

     

    alert(!$("#selectBox option:selected").text());

     

    15. 선택된 옵션의 value 구하기

     

    alert(!$("#selectBox option:selected").val());

     

    16. 선택된 옵션 index 구하기

     

    alert(!$("#selectBox option").index($("#selectBox option:selected")));

     

    17. SelecBox 아이템 갯수 구하기

     

    alert(!$("#selectBox option").size());

     

    18. 선택된 옵션 앞의 아이템 갯수

     

    alert(!$("#selectBox option:selected").prevAl!l().size());

     

    19. 선택된 옵션 후의 아이템 갯수

     

    alert(!$("#selectBox option:selected").nextAll().size());

     

    20. Insert an item in after a particular position

     

    $("#selectBox option:eq(0)").after("<option value='4'>Somepears</option>");

     

    21. Insert an item in before a particular position

     

    $("#selectBox option:eq(3)").before("<option value='5'>Someapricots</option>");

     

    22. Getting values when item is selected

     

    $("#selectBox").change(function(){

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

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

    });




    댓글 2

Designed by Tistory.