Como recarregar um SELECT com o plugin - Bootstrap Multiselect?

Estou tendo dificuldade para atualizar um **SELECT **com o plugin **Bootstrap Multiselect**

.

HTML

<div class="btn-group btn-group-justified" data-toggle="buttons">
 <label class="btn btn-default active">
 <input type="radio" name="tipo_produto" id="tp_produto" value="04" autocomplete="off" checked> Produto
 </label>
 <label class="btn btn-default">
 <input type="radio" name="tipo_produto" id="tp_materia_prima" value="01" autocomplete="off"> Matéria-Prima
 </label>
</div>

<br/>

<select class="form-control display-block" name="tipo" id="tipo" multiple="multiple" autocomplete="off">
 <option value="1">tipo 1</option>
 <option value="2">tipo 2</option>
 <option value="3">tipo 3</option>
</select>

A minha intenção é quando o usuário clicar em um dos dois botões **RADIO**(Produto/Matéria-Prima), o **SELECT **dever ser atualizado via **JQUERY.**

JQUERY

$("#tipo").multiselect();

$("input[name='tipo_produto']").on("change", function(){
 var tipo = $(this).attr('id');
 var elemento = '';

 if(tipo == 'tp_produto'){

 elemento = $('\n\
 <option value="">Produto 1</option>\n\
 <option value="">Produto 2</option>\n\
 ');

 } else if(tipo == 'tp_materia_prima'){

 elemento = $('\n\
 <option value="">Matéria-Prima 1</option>\n\
 <option value="">Matéria-Prima 2</option>\n\
 ');

 }

 $("#tipo").html(elemento); //Atualizo o conteúdo do select...
 $("#tipo").multiselect(); //O problema esta aqui, é aqui que eu quero atualizar o select manualmente...
});

Alguém pode me ajudar?