Clear select field

Question

Clear select field

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have created an Ajax request to populate a select field when the user clicks on a certain specialty to appear only the trained professionals for it. However, when clicking on another specialty the name of other professionals prevail there. I would like to change this, so when the user select type reset what was there and 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>

javascript html ajax front-end

asked by anonymous 29.05.2018 / 20:55

3 answers

1

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>

29.05.2018 / 21:45

0

I think that's how you can:

    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);
                    }
                }
            }
        })
    }

29.05.2018 / 21:11

How to find out the data type of a binary file consume api rest with react and render the data in a table

score 1 · Accepted Answer

You can empty the element with innerHTML = '' before for . Now 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);
               }
           }
       }
   })
}