Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Combo aninhada

Caso queria colocar 2 combos por exemplo: 'departamento' e 'tipo de camiseta' , onde quando o usuário escolhe por exemplo 'series de tv', exista outro combo mostrando todos os tipos refentes aquela camiseta.

Ou em departamento coloca 'calças' e no outro combo os tipos de calças.

Como poderia fazer esse aninhamento?

5 respostas

Guilherme, para criar um segundo nível de aninhamento basta repetir o processo que fez para criar o departamento (dentro do produto) no próprio departamento. Crie um scaffold, adicione um id, etc. Porém, como você quer que cada valor de departamento tenha diversos tipo (nerd, series, vintage, etc, ou pra calças: sino, balonée, skinny, etc), vai precisar fazer a relação do id na tabela do tipo, tendo então uma lista de tipos no departamento.

Seria algo mais ou menos assim:

class Produto
    belongs_to :departamento
end

class Departamento
    has_many :tipos
end

class Tipo
    belongs_to :departamento
end

E a tabela ficaria com os ids mais ou menos assim:

produtos (
    id
    departamento_id
)

departamentos (
    id
)

tipos (
    id
    departamento_id
)

e como chamaria na minha controle?

Daria um Departamento.all e qual proximo passo? Como chamo nas controles esse aninhamento?

solução!

Aí você vai precisar estudar um pouco de HTML/CSS (até JS talvez). Pois o que você quer é que pra cada departamento o usuário possa escolher um tipo, certo?

Então pra UM produto seria algo assim no controller

def formularioSeiLaDoque
    @departamentos = Departamento.all
end

E na view formularioSeiLaDoQue

<style>
.depto-tipos {display: none; }
</style>
<form ...>
    <select name="departamento">
        <% @departamentos.each do |dp| %>
            <option value="<%=dp.id%>" class="depto"><%=dp.nome%></option>
        <% end %>
    </select>
    <select name="tipo">
        <% @departamentos.each do |dp| %>
            <div id="depto-<%=dp.id%>" class="depto-tipos">
                <% dp.tipos.each do |tipo| %>
                    <option value="<%=tipo.id%>"><%=tipo.nome%></option>
                <% end %>
            </div>
        <% end %>
    </select>
</form>

Aí você faz algum javascript que dá display:block na div com id depto-N quando o departamento com id N for selecionado. Algo semelhante a isso em jQuery (a lógica, não testei. Essa parte fica pra você)

$(".depto").on("selected", function() {
    var id = $(this).val();
    $(".depto-tipos").hide();
    $("#depto-"+id).show();
}

E aí Guilherme, consegui resolver seu problema ou ainda tem alguma dúvida?

Se estiver tudo ok, lembre de marcar a solução que te ajudou como solução do tópico pra que os outros alunos com dúvidas semelhantes achem a resposta mais rapidamente!

=) Bons estudos!

Olá Marcos, estou um pouco correndo com o final de semestre da facul mas ja te dou um feedback do JS que passou.

Obrigado :)