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