jQuery selectbox 이벤트 정리

jQuery를 사용시 selectbox 이벤트 및 스크립트에서 제어 방법 정리

jQuery selectbox 선택된 값(value) 가져오기

$("#selectbox option:selected").val();
$("#selectbox").val();
$('select[name="selectName"]').val();

jQuery selectbox 선택된 텍스트 가져오기 (option의 text)

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

jQuery selectbox 초기화후에 생성

$("#selectbox option").remove();
$("#selectbox").append("<option>초기화</option>");

jQuery selectbox 특정 index select

$("#selectbox option").index("#selectbox option:selected");

jQuery selectbox 삭제

$("#selectbox").remove();

jQuery selectbox 옵션 추가하기

//selectbox 옵션 아래에 추가
$("#selectbox").append("<option>옵션</option>");
//selectbox 옵션 최상단에 추가
$("#selectbox").prepend("<option>옵션</option>");
//특정 위치 아래에 옵션 추가하기
$("#selectbox option:eq(index)").after("<option>옵션</option>");
//특정 위치 위에 옵션 추가하기
$("#selectbox option:eq(index)").before("<option>옵션</option>");

jQuery 특정 option 삭제하기

$("#selectbox option:eq(index)").remove();

jQuery 특정 값으로 selected 이벤트

//option index로
$("#selectbox option:eq(index)").prop("selected", true);
//value로
$('#selectbox[name="NAME"][value="VALUE"]').prop("selected", true);

jQuery 특정 값으로 option replace

$("#selectBox option:eq(index)").replaceWith("<option>옵션</option>");

jQuery value 값으로 selected 하기

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

jQuery selectbox 옵션 삭제하기

//첫번째 옵션 삭제하기
$("#selectBox option:first").remove();
//마지막 옵션 삭제하기
$("#selectBox option:last").remove();
//특정 위치 옵션 삭제하기
$("#selectBox option:eq(index)").remove();
//모든 옵션 삭제하기
$("#selectBox").find("option").remove();

jQuery option text값 으로 select 하기

$('#selectBox option:contains("text값")').prop("selected", true);

jQuery selectbox change 이벤트

change 이벤트 selectbox의 value 값, option 값 얻기

$("#selectBox").on("change", function(){
    //selected value
    $(this).val();
    $("option:selected", this).attr("value");
    //selected option element
    $("option:selected", this);
    $("option:selected", this).text();
    $(this).find("option:selected").text();
});