laravel5.2 Consulta em cidades com UF - Laravel 5.2

[Luiz Gustavo Costa Ceolin 8]

Prezados, bom dia. Utilizo Laravel 5.2 a um bom tempo, mas ainda apanho para algumas coisas básicas. Preciso fazer uma consulta na minha tabela de Cidades pelo identificador UF, porém isso tem que ser na mesma tela, ou seja, 1 campo com as UF e outro campo onde serão gerados as Cidades. A questão disso é que podem ser mais de uma UF que o usuário pode selecionar, é um campo Multiple. Se alguém puder ajudar, agradeço..

[FaahWl 4]

Desculpe, não entendi a sua dificuldade.

 

É com a consulta, pegar os dados, consultar pelo estado e colocar as cidades no select? 

[gabrieldarezzo 255]

Precisa mesmo usar Laravel?

 

Se liga no exemplo (Tem em JavaScript puro, e em jQuery)

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/select

 

Porem caso queira exercitar o Laravel (ou a programação...)

 

Você tem varios caminhos.

 

Enfim pensa na estrutura... 

[
	{
		sigla: "AC",
		nome: "Acre",
		cidades: [
			"Acrelândia",
			"Assis Brasil",
			"Brasiléia",
			"Bujari",
			"Capixaba",
			"Cruzeiro do Sul",
			"Epitaciolândia",
			"Feijó",
			"Jordão",
			"Mâncio Lima",
			"Manoel Urbano",
			"Marechal Thaumaturgo",
			"Plácido de Castro",
			"Porto Acre",
			"Porto Walter",
			"Rio Branco",
			"Rodrigues Alves",
			"Santa Rosa do Purus",
			"Sena Madureira",
			"Senador Guiomard",
			"Tarauacá",
			"Xapuri"			  
		]
	}


	{
		sigla: "AL",
		nome: "Alagoas",
		cidades: [
			"Água Branca",
			"Anadia",
			"Arapiraca",
			"Atalaia",
			"Barra de Santo Antônio",
			"Barra de São Miguel",
			"Batalha",
			"Belém",
	}
]

 

Então por camadas inicialmente você precisa dos estados e cada estado tem cidades....

Vai fazer um select com options ?

Algo assim?

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

 

Ou vai fazer 2 Selects? Primeira tela com 1 após o submit o outro?

 

Caso não vai utilizar submits (passo1, passo2) sem refresh sem a utilização de Javascript é impossivel :)

 

 

 

 

 

 

[Luiz Gustavo Costa Ceolin 8]

Bom, primeiramente obrigado pela atenção @FaahWl e @gabrieldarezzo, segundamente vou passar o que eu tenho hoje em maos.

 

View e JS

<select class="" name="uf" multiple="" id="uf"> <!-- campos das UF  -->
  <option value=""></option>
  <option value="SC"> SC </option>
  <option value="RS"> RS </option>
  <option value="PR"> PR </option>
</select>

<br>
<select name="cidades"> <!-- campo que irá receber a filtragem das cidades pela uf -->
  
</select>

<!-- JS -->

<script type="text/javascript">
    $('select[id=uf]').change(function () { // ativa a função quando é selecionado uma UF pelo id = uf
        var uf = $(this).val(); // recebe o valor da UF
        $.get('/get-cidades/' + uf, function (busca) { // pesquisa pela url com a rota /get-cidades/uf-selecionada
            $('select[name=cidades]').empty(); // procura o campo com o name = cidades
            $.each(busca, function (key, value) {
                $('select[name=cidades]').append('<option value=' + value.id + '>' + value.name + '</option>'); // adicionando as opções da filtragem da UF
            });
        });
    });
</script>

 

Rota que redireciona para o controller

Route::get('/get-cidades/{idEstado}', 'TesteController@getCidades');

Controller onde faz a busca das cidades e da uma resposta com um Json

public function getCidades($idEstado)
    {

    	$cidades = DB::table('cidades')
    		->where('uf','=', $idEstado)
    		->get();

    	return Response::json($cidades);
    }

 

Essa função trabalha normalmente, mas só quando passo 1 valor, preciso passar um array de dados nessa busca pela uf.

Espero que tenham entendido agora.

[marsolim 110]

eu tenho algo parecido que fiz desse jeito

 

pagina contato.html

<!-- lista de estados -->
<div class="cbx">
<label for="cEstado" class="lbl">Estado:</label><select class="txtField" id="cEstado" name="cboEstado" required onchange="selEstado();">
    <option value="Nenhum estado selecionado">Selecione o estado</option>
    <option value="Acre" >Acre</option>
    <option value="Alagoas" >Alagoas</option>
    <option value="Amapá" >Amapá</option>
    <option value="Amazonas" >Amazonas</option>
    <option value="Bahia" >Bahia</option>
    <option value="Ceará" >Ceará</option>
    <option value="Distrito Federal" >Distrito Federal</option>
    <option value="Espírito Santo" >Espírito Santo</option>
    <option value="Goiás" >Goiás</option>
    <option value="Maranhão" >Maranhão</option>
    <option value="Mato Grosso" >Mato Grosso</option>
    <option value="Mato Grosso do Sul" >Mato Grosso do Sul</option>
    <option value="Minas Gerais" >Minas Gerais</option>
    <option value="Pará" >Pará</option>
    <option value="Paraíba" >Paraíba</option>
    <option value="Paraná" >Paraná</option>
    <option value="Pernambuco" >Pernambuco</option>
    <option value="Piauí" >Piauí</option>
    <option value="Rio de Janeiro" >Rio de Janeiro</option>
    <option value="Rio Grande do Norte" >Rio Grande do Norte</option>
    <option value="Rio Grande do Sul" >Rio Grande do Sul</option>
    <option value="Rondônia" >Rondônia</option>
    <option value="Roraima" >Roraima</option>
    <option value="Santa Catarina" >Santa Catarina</option>
    <option value="São Paulo" >São Paulo</option>
    <option value="Sergipe" >Sergipe</option>
    <option value="Tocantins" >Tocantins</option>
</select>
</div>

<!-- lista de ciadades vazia vai receber cidades de acordo estado selecinado -->
<div class="cbx">
<label for="cCidade" class="lbl">Cidade:</label><select class="txtField" id="cCidade" name="cboCidade" required>
    <option value="Selecione uma cidade">Aguardando o estado...</option>
</select>
</div>

arquivo js separado

function selEstado(){
    // montando array com as cidades de cada estado, aqui resumido só pra demonstrar
    // cada est[n] é a lista de um estado de acordo ordem na lista de estados
    var est = [];
    est[0] = "Aguardando o estado...";
    est[1] = "Escolha uma cidade;Acrelândia;Assis Brasil;Brasileia;Bujari;Capixaba;Cruzeiro do Sul;Epitaciolândia;Feijó;Jordão";
    est[2] = "Escolha uma cidade;Água Branca;Anadia;Arapiraca;Atalaia;Barra de Santo Antônio;Barra de São Miguel;Batalha;Belém";
    est[3] = "Escolha uma cidade;Amapá;Calçoene;Cutias;Ferreira Gomes;Itaubal;Laranjal do Jari;Macapá;Mazagão;Oiapoque;";
    ...
    est[27] = "Escolha uma cidade;Abreulândia;Aguiarnópolis;Aliança do Tocantins;Almas;Alvorada;Ananás;Angico;Aparecida do Rio Negro";

    // pegando indice da linha selecionada na lista de estado que vai coincidir com o seu devido est[n]
    var n = parseInt(document.getElementById("cEstado").selectedIndex);

    // separando as cidades da lista de cidades do estado escolhido
    var lstEstado = est[n].split(";");

    // removendo as cidades da lista pra receber as do estado selecionado
    while(document.getElementById("cCidade").options.length > 0){
        document.getElementById("cCidade").remove(0);
    }

    // criando as cidades do estado escolhido, fContato é o nome e a id do formulário
    if(document.getElementById("cEstado").selectedIndex > 0){
        document.fContato.cCidade.options[0] = new Option("Escolha uma cidade","Escolha uma cidade");
    }else{
        document.fContato.cCidade.options[0] = new Option("Aguardando o estado...","Aguardando o estado...");
    }

    // inserindo os estados
    for(i = 1; i < lstEstado.length; i++){
        document.fContato.cCidade.options[i] = new Option(lstEstado[i],lstEstado[i]);
    }
}

é só uma amostrage pra exemplo

[Luiz Gustavo Costa Ceolin 8]

@marsolim, bom dia. Então, buscar as cidades de uma UF selecionada, eu já consigo. A minha dificuldade é buscar as cidades selecionando mais de uma UF. Exemplo: Seleciono SC e RS, filtra todas as cidades de SC e RS..

[marsolim 110]

bota a parte que vai pegar o estado num loop tipo

for (e = 0; e < cEstado.selectedOptions.length; e++){
    // desenvolve a parte de escolha das cidades como descrito acima
    // passando a index do estado com cEstado.selectedOptions[e].selected);
}

 

algo assim

[Williams Duarte 431]

Você tem que passar o name como array ou seja uf[]
 

<select class="" name="uf[]" multiple="" id="uf">

E no controller

->whereIn('uf', $idEstado)

[Luiz Gustavo Costa Ceolin 8]

@Williams Duarte, então eu também achei que poderia ser isso, porém quando passo a uf[], me retorna esse erro no console.

 

Minha rota direto com a function.

Route::get('/get-cidades/{idEstado}', function ($idEstado) {
    
		$cidades = DB::table('cidades')
	    		->wherein('uf', $idEstado)
	    		->get();

	
	    return Response::json($cidades);
});

Agora, se eu retiro o whereIn e passo apenas o where, não ocorre esse erro.

[Williams Duarte 431]

whereIn(...)  !== wherein(...)

//The whereIn method verifies that a given column's value is contained within the given array:

$users = DB::table('users')
                    ->whereIn('id', [1, 2, 3])
                    ->get();

https://laravel.com/docs/5.4/queries

[Luiz Gustavo Costa Ceolin 8]

Acredito que esse erro seja no meu arquivo Routes, pois estou acompanhando pelo console, quando eu seleciono as opções, ele passa como array normalmente, segue a imagem com as 3 opções selecionadas.

 

[Luiz Gustavo Costa Ceolin 8]

7 minutos atrás, Williams Duarte disse:

whereIn(...)  !== wherein(...)

//The whereIn method verifies that a given column's value is contained within the given array:

$users = DB::table('users')
                    ->whereIn('id', [1, 2, 3])
                    ->get();

https://laravel.com/docs/5.4/queries

 

Não a necessidade de passar as whereIn('uf', [$idEstado]), pois o laravel já considera os "[ ]" quando se passa um array por variavel, é utilizado as "[ ]" quando o valor é passado a mão. 

 

[Williams Duarte 431]

4 horas atrás, Luiz Gustavo Costa Ceolin disse:

 

Não a necessidade de passar as whereIn('uf', [$idEstado]), pois o laravel já considera os "[ ]" quando se passa um array por variavel, é utilizado as "[ ]" quando o valor é passado a mão. 

 

Isso eu sei, postei um exemplo da propria documentação.

 

Não sei se leu la em cima!!!!!!!!!!!!!!!!!!!

 

5 horas atrás, Williams Duarte disse:

Você tem que passar o name como array ou seja uf[]

Se passar como array, é meio obvio que vai chegar no formato esperado.

[gabrieldarezzo 255]

Ainda acho o meu exemplo do github mais animal haha

 

Chegou a ver o demo online? 

http://gabrieldarezzo.github.io/desafiosInternos/select/index.html

 

[FaahWl 4]

Tenta assim:

 

Na view

<select class="" name="uf" multiple="" id="uf"> <!-- campos das UF  -->
  <option value=""></option>
  <option value="SC"> SC </option>
  <option value="RS"> RS </option>
  <option value="PR"> PR </option>
</select>

<br>
<select name="cidades"> <!-- campo que irá receber a filtragem das cidades pela uf -->
  
</select>

<!-- JS -->

<script type="text/javascript">
    $('select[id=uf]').change(function () { // ativa a função quando é selecionado uma UF pelo id = uf
        var uf = $(this).val(); // recebe o valor da UF
        $.post('/get-cidades', {uf : uf}, function (busca) { // pesquisa pela url com a rota /get-cidades/uf-selecionada
            $('select[name=cidades]').empty(); // procura o campo com o name = cidades
            $.each(busca, function (key, value) {
                $('select[name=cidades]').append('<option value=' + value.id + '>' + value.name + '</option>'); // adicionando as opções da filtragem da UF
            });
        });
    });
</script>

Rota:

Route::post('/get-cidades', 'TesteController@getCidades');

E no controller:

 

public function getCidades()
    {
		$ufs = Request::post('uf');

    	$cidades = DB::table('cidades')
    		->whereIn('uf', $ufs)
    		->get();

    	return Response::json($cidades);
    }

 

[Luiz Gustavo Costa Ceolin 8]

Shoooow @FaahWl, resolvido. A apenas 1 modificação em cada tela. No lugar de post, tive que utilizar get, já que para enviar dados via post, deve conter um acionamento via um formulário. Obrigado cara.