select box 셀렉트 박스 변경 이벤트 처리(js, jquery)

JS

 

 

<select id="selectBoxTest" name="selectTest" onchange="changeSelection()">
  <option value="" selected disabled>--선택--</option>              
  <option value="one">1</option>
  <option value="two">2</option>
</select>

function changeSelection(){
	var selectedElement = document.getElementById("selectBoxTest");
    
    // 선택한 option의 value, 텍스트
    var optionVal = selectedElement.options[selectedElement.selectedIndex].value;
    var optionTxt = selectedElement.options[selectedElement.selectedIndex].text;
}

 

 

 

 

JQUERY

 

function changeSelection(){
    
    // 선택한 option의 value
    var optionVal = $("#selectBoxTest option:selected").val();
    
    // 다른 방법
    // $("#selectBoxTest > option:selected").val();
    // $("#select[name=selectTest]").val();
    
    // 선택한 option의 text
    var optionTxt = $("#selectBoxTest option:selected").text();
    
    // 선택된 위치
    var index = $("#selectBoxTest option").index($("#selectBoxTest option:selected"));
    
    // option 갯수 구하기
     $("#selectBoxTest option").size();
	
    // 선택된 option 전 후의 option 갯수
	$("#selectBoxTest option:selected").prevAll().size();
	$("#selectBoxTest option:selected").nextAll().size();
}

// 추가, 교체
// ---------------------
// option 추가하기
$("#selectBoxTest").append("<option value='3'></option>");

// 인덱스가 일치하는 option 교체
$("#selectBoxTest option:eq(1)").replaceWith("<option value='4'></option>");


// 선택
// ---------------------
// 지정된 인덱스 값으로 선택
$("#selectBoxTest option:eq(2)").attr("selected", "selected");

// 텍스트 값으로 select
$("#selectBoxTest").val("3").attr("selected", "selected");

// value 값으로 select
$("#selectBoxTest").val("2");
$("#selectBoxTest > option[@value=2]").attr("selected", "true");


// 삭제
// ---------------------
// 지정된 인덱스 값으로 삭제
$("selectBoxTest option:eq(0)").remove();

// 첫 번째 삭제
$("selectBoxTest option:first").remove();

// 마지막 삭제
$("selectBoxTest option:last").remove();
}