Create a multi-category filter using a <select>

Asked

Viewed 1,484 times

1

::EDIT::

Currently, the official code is 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 in several other selects of a form through categories. It is a very similar solution to this (http://codepen.io/desandro/pen/a807b00bb785cea30160aaa7c8e458ac/) 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';
  • It would need that I could put multiple categories into one <option>
jquery jquery-select2

2 answers

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 in case of all you can control to display all.

Codepen of the example: http://codepen.io/almermbn/pen/OWGaWz

  • Friend, I am a little layman on the subject, you could describe/simulate in a jsfiddle?

  • What the function does is, when you select a filter, it will search your other selects for the value of your #filter in your date-filter attributes from the other selects..

  • Congratulations, that’s exactly what I wanted. I only have one last problem: I’m using the Lect2 plugin and for some reason, when I adapt the code to work on the official form, it stops working. You can help me by taking a look at the online page?

  • How is your code?

  • I just updated the original post with the code rendered on the page.

  • No one else can help? :(

  • Your error is in the value of your select size. Change to match the filter date. Ex; 10 people -> 10_people

Show 2 more comments

0

First, put select with options for multiple selection.

<select id="filtro" multiple>

For the filter, you can use the change() 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.

  • Hey, actually I don’t need to select several things at the same time in the same select, I need that when selecting an option, it can filter multiple categories/options in other selects. About the Ajax part, you could example a jsfiddle?

Browser other questions tagged jquery jquery-select2

You are not signed in. Login or sign up in order to post.