Auto select a select option from an input

Asked

Viewed 1,119 times

2

I have a form, where he collects data from the post office through the zip code.
I have the following imput:

<input type="text" name="estado" id="estado" />

If the person filled in a São Paulo zip code, this input above receives the value: SP

I would like the select field below to be selected automatically with the "São Paulo" option. In this case select:

<option value="464">São Paulo</option>

Code

<select name="zone_id" id="input-order-zone" class="form-control" data-value="" data-cep="uf">
<option value=""> --- Selecione --- </option>
<option value="440">Acre</option>
<option value="441">Alagoas</option>
<option value="442">Amapá</option>
<option value="443">Amazonas</option>
<option value="444">Bahia</option>
<option value="445">Ceará</option>
<option value="446">Distrito Federal</option>
<option value="447">Espírito Santo</option>
<option value="448">Goiás</option>
<option value="449">Maranhão</option>
<option value="450">Mato Grosso</option>
<option value="451">Mato Grosso do Sul</option>
<option value="452">Minas Gerais</option>
<option value="453">Pará</option>
<option value="454">Paraíba</option>
<option value="455">Paraná</option>
<option value="456">Pernambuco</option>
<option value="457">Piauí</option>
<option value="458">Rio de Janeiro</option>
<option value="459">Rio Grande do Norte</option>
<option value="460">Rio Grande do Sul</option>
<option value="461">Rondônia</option>
<option value="462">Roraima</option>
<option value="463">Santa Catarina</option>
<option value="464">São Paulo</option>
<option value="465">Sergipe</option>
<option value="466">Tocantins</option>
</select>
javascript jquery

  • As options this select has value?

  • Yeah, I’m not showing up for you?

  • Wendell, I edited and got ve, to add pure HTML use {}

  • Wendell, you can add input html that the person type the zip code as well?

2 answers

2

To perform this action you must have some kind of value link with the option of select

function onEstadoChange(value){
  var regex = new RegExp(value, 'i'); // CRIA UM REGEX QUE VAI IGNORAR MAISCULA/MINUSCULA
  var option = jQuery('#input-order-zone').find('option').filter(function(){
    jQuery(this).removeAttr('selected'); // COMO ESTA ITERANDO TODOS OS option JA APROVEITO PARA REMORES O ATRIBUTO SELECTED
    return jQuery(this).attr('data-sigla').match(regex) != null;
  });
  var opValue = option.attr('value');
  jQuery('#input-order-zone').val(opValue);
}


jQuery(document).ready(function(){
  jQuery('#estado').on('change', function(){ // CRIA UM EVENTO change QUE É DISPARADO QUANDO O CONTEUDO MUDA
    var value = this.value; // PEGA O VALOR
    onEstadoChange(value);
  });
  onEstadoChange('MG');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="estado" id="estado" />

<select name="zone_id" id="input-order-zone" class="form-control" data-value="" data-cep="uf">
  <option value="" data-sigla=""> --- Selecione --- </option>
  <option value="440" data-sigla="">Acre</option>
  <option value="441" data-sigla="">Alagoas</option>
  <option value="442" data-sigla="">Amapá</option>
  <option value="443" data-sigla="">Amazonas</option>
  <option value="444" data-sigla="">Bahia</option>
  <option value="445" data-sigla="">Ceará</option>
  <option value="446" data-sigla="">Distrito Federal</option>
  <option value="447" data-sigla="">Espírito Santo</option>
  <option value="448" data-sigla="">Goiás</option>
  <option value="449" data-sigla="">Maranhão</option>
  <option value="450" data-sigla="">Mato Grosso</option>
  <option value="451" data-sigla="">Mato Grosso do Sul</option>
  <option value="452" data-sigla="MG">Minas Gerais</option>
  <option value="453" data-sigla="">Pará</option>
  <option value="454" data-sigla="">Paraíba</option>
  <option value="455" data-sigla="">Paraná</option>
  <option value="456" data-sigla="">Pernambuco</option>
  <option value="457" data-sigla="">Piauí</option>
  <option value="458" data-sigla="">Rio de Janeiro</option>
  <option value="459" data-sigla="">Rio Grande do Norte</option>
  <option value="460" data-sigla="">Rio Grande do Sul</option>
  <option value="461" data-sigla="">Rondônia</option>
  <option value="462" data-sigla="">Roraima</option>
  <option value="463" data-sigla="">Santa Catarina</option>
  <option value="464" data-sigla="SP">São Paulo</option>
  <option value="465" data-sigla="">Sergipe</option>
  <option value="466" data-sigla="">Tocantins</option>
</select>

  • I didn’t put all the acronyms, but just go filling in. In case you don’t want to pollute with data-sigla, advise that I have another answer, this would be the simplest.

  • William, I saw that your code here worked. But when you insert it into my page, it’s not working. When "Inspect" in Google Chrome, I saw that the option "date acronym" does not appear in the options, but if I click to display the source code appears. And if I edit the code through Chrome’s "Inspect" option and enter the "date" function works. I wonder what’s going on?

  • @Wendell You’re probably generating the option in your PHP, through an array, you would need to insert together option when she’s created.

  • I am using the Opencart platform. The original select code was like this: <select name="zone_id" id="input-order-zone" class="form-control" data-value="<?php echo $zone_id; ?>"> But since the "value" options in select are fixed I replace the original code with yours.

  • @Wendell can’t help you, I’d have to know more about the context.

  • Guilherme, I was able to solve this problem by changing the id. But there is another problem, I believe it can help me. The field <input type="text" name="estado" id="estado" /> is filled automatically when I enter the zip code and this way select is not changed, your code only works when I type the value in the field <input type="text" name="estado" id="estado" />.

  • @Wendell added an alternative. So just call the function with the value

  • @Wendell I had to make a change to the code, check :D

  • the function continues to function only if I click the field and change the value manually. Without doing so select is always marked as "Minas Gerais". When I type the zip in another field and the field <input type="text" name="estado" id="estado" /> automatically change select continues to "Minas Gerais".

  • @Wendell when you make the cep change, this should return the state ("SP", "MG"), then call the function with this value.

  • Precisely. It returns me the acronym of the state referring to the zip code that I typed. And in the fields data-sigla are all already completed with their respective acronym. I use this function to capture the status: https://viacep.com.br/exemplo/javascript/

Show 6 more comments

0

Include Javascript/Jquery:

$(document).ready(function(){
    $("#estado").on("change", function(){
        var estado = $(this).val();
        $("#input-order-zone option[sigla='" + estado + "']").prop("selected", true);
    });
});

Replace your select for this:

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

  • João Paulo, I saw that your code here worked. But when you insert it into my page, it’s not working. When "Inspect" in Google Chrome, I saw that the option "acronym" does not appear in the options, but if I click to display the source code of the page the option "acronym" appears. And if I edit the code through Chrome’s "Inspect" option and enter the "acronym" in the options your function works. I wonder what’s going on?

  • You updated the html and even then in the browser did not appear the "acronym" ?

Browser other questions tagged javascript jquery

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