1

::EDIT::

Atualmente, o código oficial está assim,mas o código do Almer ainda não funciona:

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 Renderizado no site com o plugin ativo

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

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

Gostaria de utilizar um <select> para filtrar opções em vários outros selects de um formulário através de categorias. É uma solução muito parecida com esta (http://codepen.io/desandro/pen/a807b00bb785cea30160aaa7c8e458ac/) mas utilizando Selects. Exemplo:

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

Pormenores:

  • Precisaria que tivesse uma categoria 'all';
  • Precisaria que eu pudesse colocar múltiplas categorias em um único <option>

2 Respostas 2

1

Você pode fazer algo parecido com isso:

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

E caso do all você pode controlar para exibir todos.

Codepen do exemplo: http://codepen.io/almermbn/pen/OWGaWz

7
  • Amigo, sou um pouco leigo no assunto, você poderia descrever/simular num jsfiddle? Commented 16/02/2017 às 18:47
  • O que a função faz é, quando você selecionar um filtro, ele irá procurar nos seus outros selects pelo valor do seu #filtro nos seus atributos data-filtro dos outros selects. Caso ele encontre ele esconde demais valores. Se você selecionar o filtro todos, ele irá exibir todas opções. Commented 17/02/2017 às 11:47
  • Parabéns, é exatamente o que eu queria. Só estou com um último problema: estou usando o plugin select2 e por, algum motivo, quando eu adapto o código pra funcionar no form oficial, ele para de funcionar. Você consegue me ajudar dando uma olhada na página on-line? Commented 17/02/2017 às 23:04
  • Como está seu código? Commented 21/02/2017 às 14:36
  • Acabei de atualizar o post original com o código renderizado na página. Commented 21/02/2017 às 17:36
0

Primeiro, coloque o select com opções para múltipla seleção.

<select id="filtro" multiple>

Para o filtro, Você pode utilizar o change() do jQuery para saber qual foi a categoria selecionada, e alterar o outro select.

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

Caso as opções estejam num banco de dados, utilize AJAX para trazer os resultados de acordo com o que você selecionou no primeiro select.

1
  • Ei, na verdade eu não preciso selecionar várias coisas ao mesmo tempo no mesmo select, eu preciso que, ao selecionar uma opção, ela possa filtrar várias categorias/opções em outros selects. Sobre a parte do Ajax, você poderia exemplificar num jsfiddle? Commented 16/02/2017 às 18:46

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 .