(기본/기초) Jquery select option tag, html select option 가져오기

 

1. ID로 접근하여 선택된 값 읽기

$("#셀렉트박스의ID option:selected").val();

 

2. Name로 접근하여 선택된 값 읽기

$("select[name=셀렉트박스의name값]").val();

 

3. 선택된 값의 index를 불러오기

//물론 name값으로 해도 된다.
var index = $("#셀렉트박스의ID option").index($("#셀렉트박스의ID option:selected"));

 

4. option값 추가

//맨 뒤에 추가
$("#셀렉트박스ID").append("<option value='9999'>last</option>");

//맨 앞에 추가
$("#셀렉트박스ID").prepend("<option value='0'>first</option>");

//해당 인덱스 이후에 option 추가 하기
$("#셀렉트ID option:eq(3)").after("<option value='4'>4번</option>");

// 해당 index 전에 option 추가하기
$("#셀렉트ID option:eq(6)").before("<option value='5'>5번</option>");

 

5. option값의 해당 내용 전부 교체

//방법1
$("#셀렉트박스ID").children().remove();
$("#셀렉트박스ID").append("<option value='1'>1</option><option value='2'>2</option>");

//방법2
$("#셀렉트박스ID").html("<option value='1'>1</option><option value='2'>2</option>");

 

6. option값 인덱스별 교체

//eq부분에 인덱스값을 주면 된다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>교체</option>");

 

7. selected 속성 부여

//인덱스로 추가
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

//값으로 추가1
$("#셀렉트ID").val("시작").attr("selected", "selected");   

//값으로 추가2, prop 또는 attr 둘다 된다.
$("#셀렉트ID").val("1").prop("selected", true);

//값으로 추가3
$("#셀렉트ID").text("1번").attr("selected", "selected");

 

8. option 삭제하기

//인덱스별 삭제하기
$("#셀렉트ID option:eq(3)").remove();

//첫번째 옵션 삭제
$("#셀렉트ID option:first").remove();

//두번째 옵션 삭제
$("#셀렉트ID option:last").remove();

//반복문을 통해 조건별 삭제
$("#셀렉트ID").children().each(functino(){
    if(조건){  //원하는 조건
        $(this).remove();
    }
});

 

9. 선택된 option 값 구하기

//선택된 옵션값의 텍스트 값
$("#셀렉트ID option:selected").text();

//선택된 옵션값의 value값
$("#셀렉트ID option:selected").val();

//선택된 옵션값의 인덱스 값
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

 

10. 이벤트 바인딩, 이벤트 붙이기

$("#selectID").change(function() {
    console.log($(this).val());
    console.log($(this).children("option:selected").text());
});