Select Option with filters

Question

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

Then I need two more functions, where after selecting the first filter it displays the next box with the subcategories of these models and last 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 http://dev.tray.com.br/hc/pt-br/articles/206166517-category

Answer 1

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

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