Select Option with filters

Navigation
1

Example of the first box: 

<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

I need two more functions, where after selecting the first filter it displays the next box with the subcategories of those models and lastly after selecting the model it displays the last box with the years. 

<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>

Reference link

    
asked by anonymous 20.06.2017 / 15:04

1 answer

1

Here is an example of code with similar logic: 

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><selectname='marca'id='marca'required><optionvalue=''>Selecioneamarca</option><optionvalue='VW'>Volkswagen</option><optionvalue='GM'>Chevrolet</option><optionvalue='FIAT'>FIAT</option></select><br><br><selectname='modeloVW'id='modeloVW'style='display:none;'><optionselectedvalue=''>VW-Selecioneummodelo</option><optionvalue='Gol'>Gol</option><optionvalue='Voyage'>Voyage</option></select><selectsize='1'name='modeloGM'id='modeloGM'style='display:none;'><optionselectedvalue=''>GM-Selecioneummodelo</option><optionvalue='Corsa'>Corsa</option><optionvalue='Ônix'>Ônix</option></select><selectsize='1'name='modeloFIAT'id='modeloFIAT'style='display:none;'><optionselectedvalue=''>FIAT-Selecioneummodelo</option><optionvalue='Palio'>Palio</option><optionvalue='Siena'>Siena</option></select><br><br><selectsize='1'name='versao'id='versao'style='display:none;'><optionselectedvalue=''>Selecioneaversão</option><optionvalue='1.0'>1.0</option><optionvalue='1.6'>1.6</option></select><br><br><selectsize='1'name='ano'id='ano'style='display:none;'><optionselectedvalue=''>Selecioneoano</option><optionvalue='2017'>2017</option><optionvalue='2016'>2016</option></select><br><br><inputtype="button" id="ok" value="ok" style="display:none;">

<br><br><a id="link" href="" style='display:none;'>Link</a>
    
20.06.2017 / 15:36
How to call a method within the class? Effects on hover links