[Bootstrap 3] 'Bootstrap-select' 적용 시 동적으로 옵션(option) 추가/제거하기

아무런 플러그인을 적용하지 않았다면 기본적인 자바스크립트로 'add'하거나 제이쿼리(JQuery)의 'append'를 이용하여 추가 할 수 있죠.

문제는 'Bootstrap-select'를 이용하면 되지 않는다는 것이죠 ㅎㅎㅎ

 

 

1. 레퍼런스(reference) 확인

뭔가 이상해서 레퍼런스를 확인해 봤습니다.

(참고 : silviomoreto - bootstrap-select )

 

 

아....

'부트스트랩-셀랙트'를 사용할 때 옵션이 변경되면 'refresh'를 호출하여 UI에 반영할 수 있다고 설명되어 있습니다.

 

 

2. 테스트해 보기

'부트스트랩-셀랙트'의 샘플이 잘돼 있어서 제가 따로 만들 필요가 없을 것 같긴 한데 한번 만들어 봅시다.

 

2-1. HTML 작성하기

이전에 작성했던 포스트에서 'select'태그를 해봤다면 그냥 테스트 하시면 됩니다.

(참고 : [부트스트랩] select(<select>)에 스타일 적용하기 - Bootstrap-select)

 

아니라면 아래와 같이 작성합니다.

 

<select id="selectTest1" class="selectpicker">
	<option value="a">a</option>
	<option value="b">b</option>
	<option value="c">c</option>
	<option value="d">d</option>
	<option value="e">e</option>
	<option value="f">f</option>
</select>   
<label for="labTest1"></label>

 

 

2-1-1. 일반적인 'select' 태그에 옵션을 추가하는 방법

자바스크립트를 이용하여 select 태그에 그냥 값을 추가하는 경우 다음과 같이 합니다.

function AddSelect_JS()
{
	var x = document.getElementById("selectTest1");

	var option = document.createElement("option");
	option.text = "잇힝~";
	option.value = "1";
	x.add(option, null);

	option = document.createElement("option");
	option.text = "1231233";
	option.value = "1";
	x.add(option, null);
}

 

(참고 : w3schools.com - Select add() Method)

 

 

2-2. 제이쿼리 작성

 제이쿼리로 옵션을 추가하고 리플래시를 호출해 봅시다.

function AddSelect_JQ()
{
	var $oSelect = $('#selectTest1');

	$oSelect.append(new Option('Test' ,1 , true , true));

	$oSelect.append(new Option('Dog', 2, true, true));
	$oSelect.selectpicker('refresh');
}

 

(참고 : Electric Toolbox - Add a new option to a select with jQuery ) 

 

 

마무리

이거 갱신은 안 되고 답은 안 보이고 키워드는 감이 안 잡히고 ㅡ,.ㅡ;;;

결국 답을 찾았을 때의 허탈감이란...

ㅎㅎㅎㅎ