1

Estou tendo dificuldade de fazer o código abaixo funcionar, preciso que ao ser selecionado uma cidade, este fosse redirecionado para uma determinada página.

Abaixo segue o código que estou tentando usar:

JavaScript:

<script type="text/javascript" src="http://pastebin.com/raw.php?i=Qi2BcFsP"></script> 
<script type="text/javascript">
window.onload = function() {

  new dgCidadesEstados({
    estado: document.getElementById('estado'),
    cidade: document.getElementById('cidade'),
     estadoVal: '<%=Request("estado") %>',
     cidadeVal: '<%=Request("cidade") %>'
  });
}
</script>

HTML:

</head>
<body>    
<form id="sistema" name="sistema" method="post" action="">
<label>Estado</label>
    <select id="estado" name="estado"></select>
    <label>Cidade</label>
    <select id="cidade" name="cidade"></select>
</form>
</body>
5
  • Alex na minha resposta na outra pergunta não ajudou? Você viu que eu edite ela?
    – Syzoth
    Commented 20/06/2015 às 17:33
  • Tive grande dificuldade. E com este código consegui fácil inserir ou remover as cidades e estados. Não sei onde estou errando.
    – ALEX BROOK
    Commented 20/06/2015 às 17:35
  • Tem dois códigos na resposta é o ultimo, vou postar aqui.
    – Syzoth
    Commented 20/06/2015 às 17:35
  • Com este código aí fiz tudo e deu certinho.. só preciso agora é redirecionar.
    – ALEX BROOK
    Commented 20/06/2015 às 17:37
  • o código lá na resposta faz exatamente isto, rediciona, eu não consigo entender, você não viu a atualização? Tudo bem, segue a resposta com o exemplo de redirecionamento copiado da outra resposta. Para testar o código nas respostas clique em "► Executar trecho de código"
    – Syzoth
    Commented 20/06/2015 às 17:43

2 Respostas 2

2

Adicione um evento change no seu select da cidade, ai tu consegue saber qual o valor.

<script type="text/javascript" src="http://pastebin.com/raw.php?i=Qi2BcFsP"></script> 

<form id="sistema" name="sistema" method="post" action="">
<label>Estado</label>
    <select id="estado" name="estado"></select>
    <label>Cidade</label>
    <select id="cidade" name="cidade"></select>
</form>

<script type="text/javascript">
    window.onload = function() {

      new dgCidadesEstados({
        estado: document.getElementById('estado'),
        cidade: document.getElementById('cidade'),
         estadoVal: '<%=Request("estado") %>',
         cidadeVal: '<%=Request("cidade") %>'
      });
  
      document.getElementById('cidade').addEventListener("change", function(){
        var cidadeSelecionada = this.value;
    
        if (cidadeSelecionada && cidadeSelecionada != "Selecione uma cidade") {
           //document.location.href = "suaurl.com?cidade=" + cidadeSelecionada;
           alert(cidadeSelecionada);
        }
      });
    }
</script>

13
  • Maicon poderia me dar um exemplo com duas cidades abrindo paginas de sites diferentes ?
    – ALEX BROOK
    Commented 20/06/2015 às 23:44
  • @ALEXBROOK Sites diferentes como? Se for mais especifico posso te fazer o exemplo Commented 20/06/2015 às 23:47
  • Por exemplo: após selecionar a cidade de Divinópolis abre-se a pagina redeglobo.com.br. Após selecionar a cidade de Belo Horizonte abre-se a pagina: google.com.br
    – ALEX BROOK
    Commented 20/06/2015 às 23:52
  • Existe a possibilidade de ser alterado o jeito que é montado o select? Commented 20/06/2015 às 23:56
  • 1
    Você realmente está tentando entender o código ou só está copiando e colando? Commented 21/06/2015 às 0:29
1

Como eu postei na outra resposta o exemplo de redirecionamento e expliquei:

Use o evento change, como no exemplo o começo do código deve ficar assim:

window.onload = function() {
    var estados = document.getElementById('estado');
    var cidades = document.getElementById('cidade');

    cidades.onchange = function()
    {
        if (cidades.value !== "") {
            //Basta modificar está linha conforme a necessidade
            window.location = "pagina.asp?estado=" + estados.value + "&cidade=" + cidades.value
        }
    };

    new dgCidadesEstados({
        estado: estados,
        cidade: cidades,
        estadoVal: '<%=Request("estado") %>',
        cidadeVal: '<%=Request("cidade") %>'
    });

    var opts = estados.getElementsByTagName("option");
    var i = 0, j = opts.length, e, remove = [];

    for (; i < j; i++) {
        e = opts[i];
        if (e.value !== "" && e.value !== "MG" && e.value !== "SP") {
            //Pega o elemento que será removido e adiciona ao vetor/array
            remove.push(e);
        }
    }

    i = 0;
    j = remove.length;

    for (; i < j; i++) {
        //Remove todos que são diferentes de Minas Gerais, São Paulo e vazio (este ultimo equivale ao "Selecione um estado")
        estados.removeChild(remove[i]);
    }
};
<script src="https://cidades-estados-js.googlecode.com/files/cidades-estados-1.2-utf8.js"></script>

<form id="sistema" name="sistema" method="post" action="">
<label for="cidade">Estado</label>
<select id="estado" name="estado"></select>

<label for="cidade">Cidade</label>
<select id="cidade" name="cidade"></select>
</form>

Para mudar o endereço de destino basta alterar a linha aonde se encontra window.location =

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .