[JS / jQuery] select option 선택/변경하는 방법 - prop(), find()

JQuery를 이용해 select의 option 선택/변경하는 방법

 

 

우선 속성 값을 변경하는 방법으로 prop 함수를 활용하여 앨리먼트를 컨트롤 하겠습니다.

.prop()

.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다.

 

 

 

방법1. onchange 이벤트 함수 내 사용해야 하는 경우

$("#select_id").on("change", function(){
    // value 값으로 선택
    $(this).val("1").prop("selected", true);

    // option 순서값으로 선택
    $(this).find("option:eq(0)").prop("selected", true);
});

 

방법2. 외부 스크립트에서 select의 option 값을 변경하는 경우

// value 값으로 선택
$("#select_id").val("1").prop("selected", true);
 
// OR option 순서값으로 선택
$("#select_id option:eq(0)").prop("selected", true);

 

 

prop 대신 attr을 사용하는 예도 검색해보면 찾아볼 수 있는데 attr은 스크립트로 추가된 엘리먼트는 컨트롤 할 수 없습니다.

때문에 prop을 통해 컨트롤 하시는 것을 권장 합니다.