Create a filter with multiple categories using a select

Question

Create a filter with multiple categories using a select

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

:: EDIT ::

Currently, the official code looks like this, but the Almer code still does not work:

Javascript

<script>
$(document).ready(function() {

var arraySelects = ['modelo', 'massa'];

$("#tamanho").change(function() {
    for (var j = 0; j < arraySelects.length; j++) {
      for (var i = 0; i < $("#" + arraySelects[j]).children().length; i++) {
        var option = $("#" + arraySelects[j]).children()[i];
        var attr = option.getAttribute('data-filtro');
        var filterArr = attr.split(" ");

        if ($(this).val() == 'all') {
          option.style.display = 'block';
        } else if ($.inArray($(this).val(), filterArr) == -1) {
          option.style.display = 'none';
        } else {
          option.style.display = 'block';
        }
      }
    }
});
});
</script>

HTML Rendered on site with active plugin

<div class="form-group">
    <span class="resume-subtitle">
        Escolha o tamanho
    </span>
    <div class="select2-container select2-container-multi form-control select-options-1" id="s2id_tamanho">
        <ul class="select2-choices">
            <li class="select2-search-field">
                <label for="s2id_autogen1" class="select2-offscreen"></label>
                <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" style="width: 10px;" placeholder="" aria-activedescendant="select2-result-label-37" type="text">
            </li>
        </ul>
    </div>            
    <select id="tamanho" name="tamanho" class="form-control select2-list  select-options-1" data-placeholder="Clique aqui para escolher" multiple="" tabindex="-1" style="display: none;">
        <optgroup label="Tamanho">
            <option name="mini_cake" value="Mini Cake">Mini Cake</option>
            <option name="10_pessoas" value="10 Pessoas">10 Pessoas</option>
            <option name="20_pessoas" value="20 Pessoas">20 Pessoas</option>
            <option name="30_pessoas" value="30 Pessoas">30 Pessoas</option>
            <option name="50_pessoas" value="50 Pessoas">50 Pessoas</option>        
        </optgroup>                                                    
    </select>
</div>

<div class="form-group">
    <span class="resume-subtitle">
        Escolha o modelo
    </span>
    <div class="select2-container select2-container-multi form-control select-options-1" id="s2id_modelo">
        <ul class="select2-choices">
            <li class="select2-search-field">
                <label for="s2id_autogen2" class="select2-offscreen"></label>
                <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen2" style="width: 691px;" placeholder="" aria-activedescendant="select2-result-label-41" type="text">
            </li>
        </ul>
    </div>        
    <select id="modelo" name="modelo" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple="" tabindex="-1" style="display: none;">
        <optgroup label="Tipo de Bolo">
            <option name="naked_comportado" data-filtro="10_Pessoas" value="Naked Comportado">Naked Comportado</option>
            <option name="naked_nada_comportado" data-filtro="10_Pessoas" value="Naked Nada Comportado">Naked Nada Comportado</option>
            <option name="chantininho" data-filtro="10_Pessoas" value="Chantininho">Chantininho</option>
            <option name="com_cobertura" data-filtro="10_Pessoas" value="Com Cobertura">Com Cobertura</option>
            <option name="cercado_com_chocolate" data-filtro="10_Pessoas" value="Cercado com Chocolate">Cercado com Chocolate</option>
        </optgroup>
    </select>
</div>

<div class="form-group">
    <span class="resume-subtitle">
        Escolha a Massa
    </span>
    <div class="select2-container select2-container-multi form-control select-options-1" id="s2id_massa">
        <ul class="select2-choices">
            <li class="select2-search-field">
                <label for="s2id_autogen3" class="select2-offscreen"></label>
                <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen3" style="width: 691px;" placeholder="" type="text">
            </li>
        </ul>
        <div class="select2-drop select2-drop-multi select2-display-none">
            <ul class="select2-results">
                <li class="select2-no-results">No matches found</li>
            </ul>
        </div>
    </div>
    <select id="massa" name="massa" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple="" tabindex="-1" style="display: none;">
        <optgroup label="Massas">
            <option data-filtro="20_Pessoas" value="branca">Branca</option>
            <option data-filtro="20_Pessoas" value="churros">Churros</option>
            <option data-filtro="20_Pessoas" value="chocolate">Chocolate</option>
        </optgroup>                                            
    </select>
</div>

--------- ORIGINAL POST ---------

I would like to use a <select> to filter options on several other selects of a form through categories. It's a very similar solution ( link ) but using Selects. Example:

<select id="filtro">
    <option name="categoriaQualquer">Categoria Qualquer</option>
    <option name="outraCategoria">Outra Categoria</option>
    <option name="maisUmaCategoria">Mais uma Categoria</option>
</select>

<select id="opcoesUm">
    <option data-filtro="categoriaQualquer maisUmaCategoria" value="Opção" name="opcao">Opção</option>
    <option data-filtro="maisUmaCategoria" value="Opção Dois" name="opcaoDois">Opção Dois</option>
    <option data-filtro="all" value="Opção Três" name="opcaoTres">Opção Três</option>
</select>

<select id="opcoesDois">
    <option data-filtro="maisUmaCategoria" value="Opção" name="opcao">Opção</option>
    <option data-filtro="categoriaQualquer maisUmaCategoria" value="Opção Dois" name="opcaoDois">Opção Dois</option>
    <option data-filtro="maisUmaCategoria" value="Opção Três" name="opcaoTres">Opção Três</option>
</select>

Details:

I would need it to have an 'all' category;
Needed that I could put multiple categories in a single <option>

jquery jquery-select2

asked by anonymous 15.02.2017 / 17:42

2 answers

How to prevent SQL injection in my PHP code? Pass array as parameter for web api in php with angularjs

score 1 · Answer 1

You can do something like this:

 $("#filtro").change(function(){
    for(var i =0; i< selectElement.children.length; i++){
        //iterar sobre as options para filtrar
    }
  });

And all case you can control to view all.

Codepen example: link

score 0 · Answer 2

First, put select with options for multiple selection.

<select id="filtro" multiple>

For the filter, you can use change() of jQuery to know which category was selected, and change the other select.

$("#filtro").change(function(){
    // * Altera o segundo select.
});

If the options are in a database, use AJAX to bring the results according to what you selected in the first select.