Jquery - Trying to clear a select

I have two dropdowns (select in html) one from UF and one from cities, when I select a state I want to trigger a function to populate the dropdown of cities, getting the state id as parameter. It is bringing all cities from the selected state and removing the cities from the previous state correctly, the problem is that previously selected city remains selected when the state changes. I'm stuck with version 1.11 of Jquery, if that has any influence ... I've tried doing this both for Jquery itself and for pure javascript.

     <div class="ui-grid-a">
        <div class="ui-block-a uf">
               <label for="cpEstado" class="select">
                     <select name="estado" id="cpEstado" data-theme="c"> <!--onchange="appUsuario.buscarCidades( this.value );">-->
                          <option value="" disabled selected>UF</option>
                      </select>
               </label>
        </div>
        <div class="ui-block-b cidade">
               <label for="cpCidade" class="select">
                      <select name="cidade" id="cpCidade" data-theme="c">
                          <option value="1" disabled selected>Cidade</option>
                      </select>
               </label>
       </div>

This is the html code where the selects are

$(document).on('change', '#cpEstado', function() {
            //document.getElementById("cpCidade").innerHTML = "<option id='padrao' disabled>Cidade</option>";
            //$('#cpCidade').get(0).selectedIndex = 0;
            $('#cpCidade').empty();
            appUsuario.buscarCidades( this.value );});

Here is the jquery function that I used to populate cpCity.

I tried to change the value of the selected item, and it's like this now:

It changes the text of the item but not the part of the selected