본문 바로가기

IT/JQuery

select box 선택값 가져오기

select box ID로 접근하여 선택된 값 읽기

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


select box Name로 접근하여 선택된 값 읽기

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


같은 방식으로 span과 같은 다른 태그도 접근 가능

→ $("span[name=셀렉트박스name]").text();


선택된 값의 index를 불러오기

→ var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));


셀렉트 박스에 option값 추가하기

→ $("#셀렉트박스ID").append("<option value='1'>1번</option>");


셀렉트 박스 option의 맨앞에 추가 할 경우

→ $("#셀렉트박스ID").prepend("<option value='0'>0번</option>");


셀렉트 박스의 html 전체를 변경할 경우

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


셀렉트 박스의 index별로 replace를 할 경우

→ $("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");


직접 index 값을 주어 selected 속성 주기

→ $("#셀렉트ID option:eq(1)").attr("selected", "selected");


text 값으로 selected 속성 주기

→ $("#셀렉트ID")val("1번").attr("selected", "selected");


해당 index item 삭제하기

→ $("#셀렉트ID option:eq(0)").remove();


첫번째, 마지막 item 삭제하기

→ $("#셀렉트ID option:first").remove();

→ $("#셀렉트ID option:last").remove();


선택된 옵션의 text, value 구하기

→ $("#셀렉트ID option:selected").text();

→ $("#셀렉트ID option:selected").val();


셀렉트박스의 아이템 갯수 구하기

→ $("#셀렉트ID option").size();