Select Option não limpa na tela

Front-end JavaScript
#1

Boa tarde
Tenho uma dúvida básica
Consegui fazer uma listagem nova para incluir em um Combobox (Select Option) porém continua aparecendo na tela a listagem anterior. Quando clico ele pega o novo dados.
Vou tentar exemplificar:

Primeira listagem:
A
B
C
D

Segunda listagem:
C
D

Mas na tela continua aparecendo a listagem completa
Quando clico em A o campo é preenchido com C.

Não sei como resolver.

Seguem Códigos

Javascript:

$(document).ready(function () {
$('#camporegiao').on('change', function () {
    $("#campofilial").empty();
    $.ajax({
        type: 'GET',
        url: '../../FiltroFilial',
        data: 'idregiao=' + $('#camporegiao').val(),
        statusCode: {
            404: function () {
                alert('Pagina não encontrada');
            },
            500: function () {
                alert('erro no servidor')
            }
        },
        success: function (dados) {
            filiaisfiltradas = dados.split(";");
            for (var i = 0; i < filiaisfiltradas.length; i++) {
                var codfilial = filiaisfiltradas[i].split("-")[0];
                var nomefilial = filiaisfiltradas[i].split("-")[1];
                console.log(nomefilial);
                $('#campofilial').append('<option value ="' + codfilial + '">' + nomefilial + '</option>');
            }
        }
    });
 });
 });

HTML:



Região



<% for(Regiao regiao: fdao.listarRegiao()){ %>
<option value=<%=regiao.getId()%>><%=regiao.getRegiao()%>
<% } %>






Filial



<% for(Filial filial: fdao.listarFilial()){ %>
<option value=<%=filial.getId()%>><%=filial.getFilial()%>
<% } %>
teste