Jump to content
VCastilho

Criação de um Filtro Inteligente

Recommended Posts

Boa Tarde
Estou tentando desenvolver um Filtro Inteligente, no qual funcionaria da seguinte forma:

Filtro 1         Filtro 2          Filtro 3          Filtro 4 
Opção 1
Opção 2
Opção 3


Ao selecionar a Opção 1 do Filtro 1 liberaria as opções do filtro 2

Filtro 1         Filtro 2              Filtro 3          Filtro 4 
Opção 1      Opção 1 - a     
                     Opção 1 -b
                     Opção 1 -c

Assim escolhendo a opção do filtro 2 liberaria as opções do Filtro 3 e assim por diante
Ao escolher a Opção 2 do Filtro 1 liberaria outras opções

No caso preciso aplicar na plataforma da Tray, que é o de menos porém não consigo chegar ao código certo
Estou tentando utilizar o HTML e o JQuery em conjunto para isso, conseguem me ajudar? Realmente estou perdido na situação

Atenciosamente Vinicius Castilho

Share this post


Link to post
Share on other sites

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var Filtro = function(id, container, opcoes) {

    // Retorna a quantidade de níveis disponíveis
    this.getNiveis = function() {
        return $('.'+id, container).length;
    }

    // Obtém um array contendo somente os valores selecionados
    this.val = function() {
        var value = [];
        for(var i = 1; i <= this.getNiveis(); i++) {
            value.push($('#'+id+i).val());
        }
        return value;
    };

    // private (não chamar fora do objeto)
    this.getOpcoes = function() {
        var items = opcoes;
        for(var i = 0; i < arguments.length; i++) {
            if(typeof items[arguments[i]] != 'undefined') {
                items = items[arguments[i]];
            }
        }
        var _opcoes = [];
        $.each(items, function(item) {
            _opcoes.push(item);
        });
        return _opcoes;
    };

    // private (não chamar fora do objeto)
    this.getProximosFiltros = function(nivel) {
        return $('.'+id+':has(#'+id+nivel+')', container).nextAll('.'+id);
    };

    // private (não chamar fora do objeto)
    this.criarFiltro = function(nivel) {
        // Remove filtros posteriores
        var self = this;
        self.getProximosFiltros(nivel).andSelf().remove();

        // Cria o filtro em branco
        $('<div class="'+id+'"><label for="'+id+nivel+'">Filtro '+nivel+'</label><select id="'+id+nivel+'"><option></option></select></div>').appendTo(container);
        var $select = $('#'+id+nivel).on('change', function() {
            if($(this).val() == '') {
                self.getProximosFiltros(nivel).remove();
            } else {
                self.criarFiltro(nivel + 1);
            }
        });

        // Determina as opções do filtro novo
        var items = self.getOpcoes.apply(self.getOpcoes, self.val());

        // Adiciona as opções ao filtro novo
        // ou o remove, caso esteja vazio
        if(items.length > 0) {
            $.each(items, function() {
                $select.append('<option>'+this+'</option>');
            });
        } else {
            $select.closest('.'+id).remove();
        }
    };

    this.criarFiltro(1);
};
$(function() {
    document.instancia1 = new Filtro('instancia1', 'body', {
        "Carros": {
            "Volks": true,
            "Fiat": {
                "Linea": true,
                "Uno": true
            }
        },
        "Roupas": {
            "Camisetas": {
                "Manga longa": {
                    "Branca": true,
                    "Preta": true
                },
                "Manga curta": {
                    "Cinza": true
                }
            }
        }
    });
});
</script>
<button type="button" onclick="alert(document.instancia1.val().join(' > '));">Ver valores selecionados</button>
<button type="button" onclick="alert(document.instancia1.getNiveis());">Ver quantidade de níveis</button>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By lezão
      Boa noite!
      Td bem com vcs?
      Peguei um codigo de modal muito util para mim, mas ele naun sai do lugar, estou tentando posiciona lo em outro lugar e naun consigo.
      Ja fiz de tudo e nada resolveu alguém pode me ajudar?
      Gostaria que ele ficasse, aonde eu colocar ele aceitar e rodar.
      segue o codigo abaixo:
      <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button used to ppen the contact form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width input fields */ .form-container input[type=text], .form-container input[type=file], .form-container input[type=textarea] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* When the inputs get focus, do something */ .form-container input[type=text]:focus, .form-container input[type=file]:focus, .form-container input[type=textarea]:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <button class="open-button" onclick="closeForm()">Open Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1> <img src="http://mercatotal.com.br/gnservice/img/logotipo2.png" width="170px" height="70px"/></h1> <label for="nome"><b>Nome:</b></label> <input type="text" placeholder="Seu Nome" name="nome" required/> <label for="foto"><b>Foto:</b></label> <input type="file" placeholder="Sua Foto" name="foto" required/> <label for="comment"><b>Comentários:</b></label> <textarea placeholder="Seu Comentário" name="depoimento" cols="36,7" rows="10" required></textarea> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="openForm()">Close</button> </form> </div> muito obrigado!
    • By carlosmassam
      Bom noite a todos.

      Eu tenho o seguinte código
       
      <input type="radio" id="radio01" name="radio01" value="radio01"> <input type="radio" id="radio02" name="radio02" value="radio02"> <input type="radio" id="radio03" name="radio03" value="radio03"> <input type="radio" id="radio04" name="radio04" value="radio04"> <input type="radio" id="radio05" name="radio05" value="radio05"> Este código me apresenta 5 radiobuttons distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbuttons anteriores, e os radionbutton posteriores fossem "deschecado".
      Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
      Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
    • By lezão
      Boa tarde, meus amigos (as)!
      Estou tentando fazer uma box desse jeito da foto em anexo.
       
       
      Este é o código que estou tentando fazer ficar igual a da foto...
       
      alguém pode me ajudar ?
       
      fieldset{ width:100%; height:100%; padding: 1em; font:80%/1 sans-serif; border-radius: 10px; padding: 5px; min-height:1px; background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; border: 1px solid #AAAAAA; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px #AAAAAA; font-size: 15px; color: #000; text-transform: uppercase; text-align: center; } div.box { width: 250px; display: inline-block; padding: 15px; min-height:1px; } <div class="box"> <fieldset onclick="location.href='#'" style="cursor:pointer;" align="center"> <img src="btn-galeria.png" width="130" height="130" /> <br/><br/> <span> Galeria de Fotos</span> <br/><br/> </fieldset> </div>  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.