Clear campo select

Question

I created an Ajax request to fill in a field select when the user clicks on a certain specialty appear only the professionals qualified for the same. However, when clicking on another specialty the name of the other professionals prevail there. It would have to change this, for when the user select type reset what had there and put the new select.

<script>
        function buscarMedicos(especialidades) {
            $.ajax ({
                url: 'select.php',
                type: 'POST',
                async: true,
                dataType: 'json',
                data:{'especialidades' : especialidades},

                success: function (result)
                {
                   if (result !=  "")
                   {
                        for (var i = 0; i < result.length; i++)
                        {
                            var aux = result[i];
                            var campoSelect = document.getElementById("umedico");
                            var option = document.createElement("option");
                            option.text = aux;
                            option.value = aux;
                            campoSelect.add(option);
                        }
                    }
                }
            })
        }
    </script>

Answer 1

You can empty the element with innerHTML = '' before the for. Now the async: true, is unnecessary since Ajax by default is already async:

function buscarMedicos(especialidades) {
   $.ajax ({
       url: 'select.php',
       type: 'POST',
//       async: true,
       dataType: 'json',
       data:{'especialidades' : especialidades},
       success: function (result)
       {
          if (result !=  "")
          {
               var campoSelect = document.getElementById("umedico");
               campoSelect.innerHTML = '';
               for (var i = 0; i < result.length; i++)
               {
                   var aux = result[i];
                   var option = document.createElement("option");
                   option.text = aux;
                   option.value = aux;
                   campoSelect.add(option);
               }
           }
       }
   })
}

Answer 2

I did with vector but you adapt to your code

Follow the suggestion

var clinico = [
   {id : 1, descricao: 'Antonio'},
   {id : 2, descricao: 'Maria'},
   {id : 3, descricao: 'Ana'},
 ]
 
 var ortopedista = [
   {id : 1, descricao: 'Saulo'},
   {id : 2, descricao: 'Santos'},
   {id : 3, descricao: 'Guilherme'},
 ]
 
 var cardio = [
   {id : 1, descricao: 'Paes'},
   {id : 2, descricao: 'Cloes'},
   {id : 3, descricao: 'Paulo'},
 ]
 
 $( document ).ready( function(){
     espec()
 } ) 


$('#espec').on('change', function(){
  espec();
})

function espec(){

   var id = $('#espec').val()
 
   var select = $('#prestador')
   if( id == 1 ){
      
      var option = "";
      $.each( clinico, function(i, j){
          option += "<option value="+j.id+">"+j.descricao+"</option>"
      } )
      select.find('option').remove();
      select.append( option )
      
   }
   
   if( id == 2 ){
      
      var option = "";
      $.each( ortopedista, function(i, j){
          option += "<option value="+j.id+">"+j.descricao+"</option>"
      } )
      select.find('option').remove();
      select.append( option )
      
   }
   
   if( id == 3 ){
      
      var option = "";
      $.each( cardio, function(i, j){
          option += "<option value="+j.id+">"+j.descricao+"</option>"
      } )
      select.find('option').remove();
      select.append( option )
      
   }
   
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-group">
  <label>Select Especialidade</label>
  <select class="form-control" id="espec">
     <option value="1">Clinico Geral</option>
     <option value="2">Ortopedista</option>
     <option value="3">Cardiologista</option>
  </select>
</div>

<div class="form-group">
  <label>Select Medicos</label>
  <select class="form-control" id="prestador">
  </select>
</div>

Answer 3

I think you can do it:

    function buscarMedicos(especialidades) {
        $.ajax ({
            url: 'select.php',
            type: 'POST',
            async: true,
            dataType: 'json',
            data:{'especialidades' : especialidades},

            success: function (result)
            {
               if (result !=  "")
               {
                    var campoSelect = document.getElementById("umedico");// define o select antes do for
                    campoSelect.html('');//apaga todo conteúdo html dentro do select, então o for vai preenche-lo
                    for (var i = 0; i < result.length; i++)
                    {
                        var aux = result[i];
                        var option = document.createElement("option");
                        option.text = aux;
                        option.value = aux;
                        campoSelect.add(option);
                    }
                }
            }
        })
    }