Fill Select Automatically via If and Else with Jquery

Asked

Viewed 393 times

1

I am in need of a help. I have a form that captures address information through the zip code.

I need a Jquery function that will select a field in a select depending on the automatically filled value in the input with id estado. See how I tried but it doesn’t work:

$("#estado").val(dados.uf); // preenche o input estado automaticamente (funciona)
var estado = this.val(dados.uf); // aqui quero pegar o valor preenchido para selecionar automaticamente o select com id `selecione-estado`
if(estado == 'SP') {
    $("#selecione-estado option[data-sigla='SP']").prop("selected", true);
}
else if(estado == 'GO') {
    $("#selecione-estado option[data-sigla='GO']").prop("selected", true);
}

My selectis like this:

<select name="zone_id" id="selecione-estado" class="form-control" data-value="" data-cep="uf">
    <option value="" data-sigla=''> --- Selecione --- </option>
    <option value="440" data-sigla='AC'>Acre</option>
    <option value="441" data-sigla='AL'>Alagoas</option>
    <option value="442" data-sigla='AP'>Amapá</option>
    <option value="443" data-sigla='AM'>Amazonas</option>
    <option value="444" data-sigla='BA'>Bahia</option>
    <option value="445" data-sigla='CE'>Ceará</option>
    <option value="446" data-sigla='DF'>Distrito Federal</option>
    <option value="447" data-sigla='ES'>Espírito Santo</option>
    <option value="448" data-sigla='GO'>Goiás</option>
    <option value="449" data-sigla='MA'>Maranhão</option>
    <option value="450" data-sigla='MT'>Mato Grosso</option>
    <option value="451" data-sigla='MS'>Mato Grosso do Sul</option>
    <option value="452" data-sigla='MG'>Minas Gerais</option>
    <option value="453" data-sigla='PA'>Pará</option>
    <option value="454" data-sigla='PB'>Paraíba</option>
    <option value="455" data-sigla='PR'>Paraná</option>
    <option value="456" data-sigla='PE'>Pernambuco</option>
    <option value="457" data-sigla='PI'>Piauí</option>
    <option value="458" data-sigla='RJ'>Rio de Janeiro</option>
    <option value="459" data-sigla='RN'>Rio Grande do Norte</option>
    <option value="460" data-sigla='RS'>Rio Grande do Sul</option>
    <option value="461" data-sigla='RO'>Rondônia</option>
    <option value="462" data-sigla='RR'>Roraima</option>
    <option value="463" data-sigla='SC'>Santa Catarina</option>
    <option value="464" data-sigla='SP'>São Paulo</option>
    <option value="465" data-sigla='SE'>Sergipe</option>
    <option value="466" data-sigla='TO'>Tocantins</option>
</select>

1 answer

2

do as follows:

var data = { uf: 'SP' };
var estado = $("#estado");
var select = $("#selecione-estado");
var option = $("option[data-sigla='" + data.uf + "']");
estado.val(data.uf);
select.val(option.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="estado" type="text" />
<select name="zone_id" id="selecione-estado" class="form-control" data-value="" data-cep="uf">
  <option value="" data-sigla=''> --- Selecione --- </option>
  <option value="440" data-sigla='AC'>Acre</option>
  <option value="441" data-sigla='AL'>Alagoas</option>
  <option value="442" data-sigla='AP'>Amapá</option>
  <option value="443" data-sigla='AM'>Amazonas</option>
  <option value="444" data-sigla='BA'>Bahia</option>
  <option value="445" data-sigla='CE'>Ceará</option>
  <option value="446" data-sigla='DF'>Distrito Federal</option>
  <option value="447" data-sigla='ES'>Espírito Santo</option>
  <option value="448" data-sigla='GO'>Goiás</option>
  <option value="449" data-sigla='MA'>Maranhão</option>
  <option value="450" data-sigla='MT'>Mato Grosso</option>
  <option value="451" data-sigla='MS'>Mato Grosso do Sul</option>
  <option value="452" data-sigla='MG'>Minas Gerais</option>
  <option value="453" data-sigla='PA'>Pará</option>
  <option value="454" data-sigla='PB'>Paraíba</option>
  <option value="455" data-sigla='PR'>Paraná</option>
  <option value="456" data-sigla='PE'>Pernambuco</option>
  <option value="457" data-sigla='PI'>Piauí</option>
  <option value="458" data-sigla='RJ'>Rio de Janeiro</option>
  <option value="459" data-sigla='RN'>Rio Grande do Norte</option>
  <option value="460" data-sigla='RS'>Rio Grande do Sul</option>
  <option value="461" data-sigla='RO'>Rondônia</option>
  <option value="462" data-sigla='RR'>Roraima</option>
  <option value="463" data-sigla='SC'>Santa Catarina</option>
  <option value="464" data-sigla='SP'>São Paulo</option>
  <option value="465" data-sigla='SE'>Sergipe</option>
  <option value="466" data-sigla='TO'>Tocantins</option>
</select>

P.S.: it is not necessary to set the selected of option.

  • Perfect. This way shortened the code and ran what I needed!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.