2
respostas

select

Desculpe se a pergunta for tola.. mais não estou conseguindo fazer... tenho um fotmulario, onde tenho 2 select, um com categoria e outro com modelo. o modelo possui uma categoria.. até ai blz.. porem quando escolho a categoria eu quero mostrar apenas os modelos daquela categoria no outro select, como eu faço, não estou conseguindo

<label>Categoria: </label>
                      <select name="categoria_id" class="select select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                        <option value="0">Selecione uma opção</option>
                      <optgroup label="Escolha o tipo do seu produto">
                      @foreach($categorias as $c)
                      <option value="{{$c->id}}">{{$c->nome}}</option>
                      @endforeach
                      </optgroup>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                      <label>Modelo: </label>
                      <select name="modelo_id" class="select select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                        <option value="0">Selecione uma opção</option>
                      <optgroup label="Escolha o tipo do seu produto">
                      @foreach($modelos as $m)
                      <option value="{{$m->categoria->id}}{{$m->id}}">{{$m->nome}}</option>
                      @endforeach
                      </optgroup>
                      </select>
2 respostas

Você precisa usar Ajax. Quando você carregou os dois selects da maneira que você fez você simplesmente trouxe uma listagem de todas as categorias e todos os modelos, sem distinção. Se você quer filtrar, digamos, em "tempo real", precisa fazer uma requisição assíncrona ao servidor no evento da seleção, usando JavaScript.

Um exemplo genérico, faltando alguns detalhes de implementação (usando jQuery) seria:

$('seuSelect').change(function() {

    $.ajax({

        url: '{{route('rotaParaAtualizarSelect')}}',
        data: { id: $(this).val() },
        method: 'get'

    }).done(function(data) {

        /*
        Pegar o JSON retornado pelo Controller,
        transformá-lo em um array do JavaScript,
        fazer um foreach e preencher o outro select
        com as options baseadas nos dados do array.
        */

    }).fail(function(msg) {

        alert(msg);

    });

});

Seu controller:

public function getModelosDeCategoria(Request $req) {

    return Modelo::where('id_categoria', $req->id)->get()->toJson();

}

Se você nunca experimentou usar Ajax antes, sugiro que faça uns testes simples antes. É bem interessante.

Obrigado pela dica, vou experimentar