Bootstrap selectpicker 값 설정 , 초기화 및 option 변경 후 사용 팁

부트스트랩 selectpicker 드롭다운 화면

 

부트스트랩 select 플러그인(bootstrap-select)으로 만든 드롭다운은 자바스크립트로 값이나 옵션을 바꿔도 화면이 바로 바뀌지 않습니다. 값을 바꾼 뒤에는 화면을 다시 그리는 명령을 한 번 더 불러야 합니다. 이 글에서는 값 설정, 옵션 교체, 초기화 방법을 정리했습니다.

1. 값 설정하기

// 단일 값 선택
$('#mySelect').selectpicker('val', 'ABC');
// 여러 개 선택 (multiple 속성이 있는 select)
$('#mySelect').selectpicker('val', ['ABC', 'DEF']);

selectpicker('val', 값)은 값을 넣고 화면까지 함께 갱신합니다. 일반적인 방법으로 select의 value만 바꾼 경우에는 화면이 갱신되지 않으니 아래 refresh를 함께 사용합니다.

2. 옵션을 바꾼 뒤 다시 불러오기

// 기존 옵션 지우기 (값이 빈 옵션은 남김)
$('#mySelect option').not("[value='']").remove();
// 새 옵션 추가 (option 태그로 감싸야 합니다)
$('#mySelect').append('항목 1');
$('#mySelect').append('항목 2');
// 화면 갱신
$('#mySelect').selectpicker('refresh');

옵션은 반드시 option 태그로 감싸야 합니다. 글자만 넣으면 드롭다운에 나타나지 않습니다.

3. 값 초기화하기

// value가 'default'인 옵션을 선택하고 화면 갱신
$('#mySelect').val('default');
$('#mySelect').selectpicker('refresh');

초기화할 값(여기서는 default)을 가진 option이 있어야 합니다. 없으면 선택이 비어 보입니다. 한 줄로 쓰려면 $('#mySelect').selectpicker('val', 'default')도 같은 결과입니다.

4. 화면이 이상할 때 확인할 것

• 셀렉터는 select 태그 자체를 가리켜야 합니다. 원래 예시처럼 'Selector .selectpicker'로 쓰면 아무것도 잡히지 않습니다.
• 옵션을 바꾸고 refresh를 부르지 않으면 화면은 예전 목록을 그대로 보여 줍니다.
• 목록은 맞는데 레이아웃만 깨졌다면 render를 씁니다. $('#mySelect').selectpicker('render');
• 플러그인을 지우고 다시 만들어야 할 때는 destroy를 씁니다. $('#mySelect').selectpicker('destroy');

관리자 화면처럼 드롭다운이 많은 페이지에서 쓰는 방법은 부트스트랩 기반 무료 관리자 템플릿 20선 글에서도 볼 수 있습니다.

메서드 이름과 설명은 공식 문서 미러(bootstrap-select Methods)를 기준으로 확인했습니다. 예제는 원래 예제 페이지에서 볼 수 있습니다. 플러그인 버전에 따라 동작이 다를 수 있습니다.