jQuery를 이용해 select의 옵션을 원하는대로 변경하는 방법을 소개해드립니다.

이런 경우 사용이 되겠습니다.

1. 옵션을 선택하고 다시 셀렉트 박스를 초기화 해야하는 경우
2. 버튼을 클릭하거나 특정 이벤트가 발생하는 경우 자동으로 셀렉트 박스의 옵션을 변경해야 하는 경우

코드는 아래와 같습니다.

방법1. on change 이벤트 함수 내 사용하는 경우

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

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

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

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

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

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

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