Select of dynamic cities , according to the selected state

Asked

Viewed 137 times

0

I need the select of cities to have options according to the chosen state.

<!DOCTYPE html>
<html>
<head>
    <title>estados</title>
    <meta charset="utf-8">  
</head>
<body onload="mods()">

Estado: <select id="estados">
<option></option>
</select><br><br>

Cidade: <select id="cidades">
<option></option>
</select>

</body>
</html>
<script type="text/javascript">
var arrayEstados = ['Rio de Janeiro','São paulo','Minas Gerais']

var rj = {
nome: 'Rio de Janeiro',
cidades: ['Belford Roxo','São joão de meriti','Duque de Caxias'],

} 

var sp = {
nome: 'São paulo',
cidades: ['Diadema','Bauru','Suzano'],

}


var mg = {
nome: 'Minas Gerais',
cidades: ['Belo Horizonte','Betim','Contagem'],

}
</script>
'''
javascript

  • I am layman still in javascript, sorry I can not explain in a clearer way. But what I want is the same that some sites have. for example, according to the chosen state, in the other select appears only the cities of that state.

  • 1

    Tip: Present your problem in an abstract way. Do not directly use problem code. Make a reduced version, without your business rule, no lines of code that are not directly linked to the problem. So your question becomes clearer for yourself to better elaborate the question, clearer for others to answer and more generic to help others in the future..

  • blz friend I will review and edit

  • Friend put only html and the objects that should appear in options. can help?

  • Buddy, there’s a question right here at stackoverflow that I think helps you. https://answall.com/questions/69802/filtrar-estados-e-cidades-da-biblioteca-cidades-estados-js

2 answers

1

Mano I would do using a back end service, ai da save the languages in a database and use ajax ex: the html:

    <select asp-for="Estado" id="Estado"aspitems="@(newSelectList(@ViewBag.Origens))">
        <option>Estado</option>
    </select>
    <label asp-for="Estado"></label>
   

    <select asp-for="Cidade" id="Cidade" asp-items="@(new SelectList(string.Empty))">
        <option>Selecione Cidade</option>
    </select>

    <label asp-for="Cidade"></label>
     


    $(function () {
      $('#Estado').change(function () {
            var data = $("#Estado").val();
                     
            $.ajax({
                url: '/endereço do controlador=' + data,
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.value + "'>" + item.text + "</option>";
                    });
                    $('#Cidade').html(items)
                   
                    
                }
            })
         
      })
    })

0

I made a simple script to answer that question. If new questions arise (this is what I hope), do it in new posts as objectively as possible, as you did after editing.

// Em vez de uma variável para cada estado, o melhor é ter uma estrutura de
// dados unificada. Assim você não precisará de um "if" para cada estado na
// função que alimenta o select de cidades.
var brasil = {
  'Rio de Janeiro': ['Belford Roxo','São joão de meriti','Duque de Caxias'],
  'São paulo':      ['Diadema','Bauru','Suzano'],
  'Minas Gerais':   ['Belo Horizonte','Betim','Contagem']
}

// Adicione os estados no fim do carregamento do DOM.
// Como esse script é o último elemento (e isso é bom), podemos fazer isso
// imediatamente. Se estivesse num arquivo independente carregado no head,
// você poderia esperar por um evento como o DOMContentLoaded.
// https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Object.keys(brasil).forEach(estado => {
  let opt = document.createElement('option')
  opt.innerText = estado
  estados.appendChild(opt)
})

// Para atualizar as cidades podemos reagir ao evento de mudança do estado:
estados.addEventListener('change', event => {
  // Limpa o select de cidades:
  while (cidades.firstChild) cidades.removeChild(cidades.firstChild)
  // Pega as cidades do estado selecionado:
  let cidadesArr = brasil[estados.value]
  if (cidadesArr) {
    // Cria o primeiro elemento de valor nulo:
    let opt = document.createElement('option')
    opt.innerText = 'Selecione...'
    opt.value = ''
    cidades.appendChild(opt)
    // Cria uma opção para cada cidade:
    cidadesArr.forEach(cidade => {
      let opt = document.createElement('option')
      opt.innerText = cidade
      cidades.appendChild(opt)
    })
  }
})
<!--
Não precisamos renovar o select de estados, então já o deixo com a opção nula.
Colocarei os estados via script, para garantir que os valores sejam idênticos
aos dados.
-->
Estado: <select id="estados">
  <option value="">Selecione...</option>
</select>

<br><br>

<!--
O select de cidades precisará ser reiniciado sempre que o estado mudar, então
não faz sentido nenhuma inicialização aqui no HTML.
-->
Cidade: <select id="cidades"></select>

Browser other questions tagged javascript

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