Auto select option from a select from an input

Question

Auto select option from a select from an input

Navigation

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

2

I have a form, where it 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 has filled out an SP from São Paulo, this input above is given the value: SP

I would like the select field below to be automatically selected with the "São Paulo" option. In case the 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

asked by anonymous 28.04.2016 / 18:20

2 answers

Copying string stored in pointer UPDATE in MySql based on the last date of a column

score 2 · Answer 1

To do this you must have some kind of value binding with 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><inputtype="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>

score 0 · Answer 2

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 with 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>