1

Exemplo da primeira Caixa:

<h5>Filtrar por Marcas</h5>
    <select name="filtrar_marca">
    {% for category in categories %}
         <option value="{{ category.name }}">{{ category.name }}</option>
    {% endfor %}
    </select>
  Exemplo de resultado:

  Filtrar por Marcas
  BMW
  HONDA

Ai preciso de mais duas funções, onde após selecionar o primeiro filtro ele exiba a próxima caixa com as subcategorias desses modelos e por ultimo após selecionar o modelo ele exiba a ultima caixa com os anos.

<h5>Filtrar por Modelos</h5>
<select name="filtrar_modelo">

    <option value=""></option>

</select>

<h5>Filtrar por Ano</h5>
<select name="filtrar_ano">

    <option value=""></option>

</select>

Referência http://dev.tray.com.br/hc/pt-br/articles/206166517-category

1 Resposta 1

1

Segue exemplo de código com lógica semelhante:

jQuery(function($) {
  $('#marca').change(function() {
    var marca = $('#marca').val();
    switch (marca) {
      case '':
        $('#modeloVW, #modeloGM, #modeloFIAT, #versao, #ano').hide();
        break;
      case 'VW':
        $('#modeloVW').show();
        $('#modeloGM, #ModeloFIAT, #versao, #ano').hide();
        break;
      case 'GM':
        $('#modeloGM').show();
        $('#modeloVW, #modeloFIAT, #versao, #ano').hide();
        break;
      case 'FIAT':
        $('#modeloFIAT').show();
        $('#modeloVW, #modeloGM, #versao, #ano').hide();
        break;
      default:
        $('#modeloVW, #modeloGM, #modeloFIAT, #versao, #ano').hide();
        break;
    }
  });
  $('#modeloVW, #modeloGM, #modeloFIAT').change(function() {
    var modelo = $(this).val();
    if (modelo == ''){
        $('#versao').hide();
    }
    else{
        $('#versao').show();
    }
  });
  $('#versao').change(function() {
    var versao = $('#versao').val();
    if (versao == ''){
        $('#ano').hide();
    }
    else{
        $('#ano').show();
    }
  });
  $('#ano').change(function() {
    var versao = $('#versao').val();
    if (versao != ''){
        $('#ok').show();
        var marca = $('#marca').val();
        switch (marca) {
          case 'VW':
            var modelo = $('#modeloVW').val();
            break;
          case 'GM':
            var modelo = $('#modeloGM').val();
            break;
          case 'FIAT':
            var modelo = $('#modeloFIAT').val();
            break;
        }
        var versao = $('#versao').val();
        var ano = $('#ano').val();
        $('#link').show();
        $('#link').attr('href', 'dominio.com.br?marca='+marca+'&modelo='+modelo+'&versao='+versao+'&ano='+ano);
    }
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select name='marca' id='marca' required>
      <option value=''>Selecione a marca</option>
      <option value='VW'>Volkswagen</option>
      <option value='GM'>Chevrolet</option>
      <option value='FIAT'>FIAT</option>
</select><br><br>

<select name='modeloVW' id='modeloVW' style='display:none;'>
	  <option selected value=''>VW - Selecione um modelo</option>
	  <option value='Gol'>Gol</option>
          <option value='Voyage'>Voyage</option>
</select>

<select size='1' name='modeloGM' id='modeloGM' style='display:none;'>
	  <option selected value=''>GM - Selecione um modelo</option>
	  <option value='Corsa'>Corsa</option>
          <option value='Ônix'>Ônix</option>
</select>

<select size='1' name='modeloFIAT' id='modeloFIAT' style='display:none;'>
	  <option selected value=''>FIAT - Selecione um modelo</option>
          <option value='Palio'>Palio</option>
	  <option value='Siena'>Siena</option>
</select>

<br><br><select size='1' name='versao' id='versao' style='display:none;'>
	  <option selected value=''>Selecione a versão</option>
	  <option value='1.0'>1.0</option>
	  <option value='1.6'>1.6</option>
</select>

<br><br><select size='1' name='ano' id='ano' style='display:none;'>
	  <option selected value=''>Selecione o ano</option>
	  <option value='2017'>2017</option>
	  <option value='2016'>2016</option>
</select>

<br><br><input type="button" id="ok" value="ok" style="display:none;">

<br><br><a id="link" href="" style='display:none;'>Link</a>

4
  • Isso, era essa lógica mesmo. Agora tira uma dúvida, como seria para após selecionar as 4 etapas aparecer um botão de OK pegando essas variáveis e jogando em um link? 20/06/2017 às 18:14
  • @RafaelMeirim Editei o post, veja se agora atende o que você precisa. Gerei um link colocando todas as variáveis no endereço do mesmo.
    – Leandro
    20/06/2017 às 18:41
  • Perfeito, vou da uma estudada no código e adaptar as variáveis. Valeu! 20/06/2017 às 18:57
  • Tranquilo, depois só aceita a resposta para a pergunta já ficar como respondida.
    – Leandro
    20/06/2017 às 20:58

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 .