1

Eu gostaria que, por exemplo, ao escolher a opção '10 pessoas' no select 'Tamanho', eu pudesse esconder opções específicas nos selects 'Modelo', 'Recheios', 'Opções para Escorrer' e 'Decoração'.

Exemplo:

<div class="form-group">
    <span class="resume-subtitle">Escolha o tamanho</span>
    <select id="tamanho" name="tamanho" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple>
        <optgroup label="Tamanho">
        <?php

            $strTamanho = "SELECT * FROM bolo_mesa_itens WHERE tipo='tamanho'";

            $rsTamanho = mysql_query($strTamanho);

            while($rowTamanho = mysql_fetch_array($rsTamanho)) {
                echo '<option value="' . $rowTamanho['value'] . '">' . $rowTamanho['nome'] . '</option>';
            } 
        ?>      
        </optgroup>                                                 
    </select>
</div>

<div class="form-group">
<span class="resume-subtitle">Escolha o modelo</span>

<select id="modelo" name="modelo" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple>
<optgroup label="Tipo de Bolo">
<?php
    $strModelo = "SELECT * FROM bolo_mesa_itens WHERE tipo='modelo'";

    $rsModelo = mysql_query($strModelo);

    while($rowModelo = mysql_fetch_array($rsModelo)) {
        echo '<option class="10_pessoas" value="' . $rowModelo['value'] . '">' . $rowModelo['nome'] . '</option>';
    }
?>
</select>
</div>

2 Respostas 2

2

Veja uma ideia de como seria resolver esse problema:

$('#tamanho').on('change', function() {
    var classe = this.value;
    var options = $('#modelo option').remove();
	options.each(function() {
        var opt = $(this);
        if (opt.hasClass(classe)) opt.show();
        else opt.hide();
    });
	$('#modelo').append(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- seleção com os tamanho-->
Tamanhos:
<select id="tamanho" name="tamanho">
    <option selected="selected" value="0">Escolha um tamanho</option>
    <option value="10">10 pessoas</option>
    <option value="20">20 pessoas</option>
    <option value="30">30 pessoas</option>
</select>
<br/>
<br/>
Modelos:
<!-- selção com modelos -->
<select id="modelo" name="modelo">    
    <option value="M1" class="10">Modelo 1</option>
    <option value="MO" class="10">Outro Modelo</option>
    <option value="MA" class="20">Modelo Aleatório</option>
    <option value="M3" class="30">Modelo 2</option>
    <option value="MA" class="30">Modelo 3</option>
    <option selected="selected" value="0">Escolha um modelo</option>
</select>

Criei um arquivo chamado ComboDinamico e coloquei no GitHub só para ficar registrado.

8
  • É uma excelente saída, associando a filtragem às classes! Mas e caso o meu value seja uma string comum assim como o exibido, tipo "10 Pessoas"? Commented 11/02/2017 às 5:07
  • @MuriloRavani não tem problema. Ai você tem que alterar a classe do modelo para o valor que referencia o tamanho.
    – viana
    Commented 11/02/2017 às 5:10
  • Desculpe @Ack, não entendi... é que no caso, eu não consigo ter uma classe com espaços tipo .10 Pessoas(não citei ali, mas o meu value deste campo é assim ao invés de 10_pessoas. Pode exemplificar pra mim? Commented 11/02/2017 às 16:40
  • Amigo, acabei de testar no ambiente e, o seu código faz o filtro direitinho. Quando adapto para o meu acaba não fazendo... será que é porque estou utilizando o plugin select2? Atualizei o código da postagem para ficar igual ao meu. Como teste, forcei também que todas as opções de 'modelo' ficassem com a classe '10_pessoas' (que é o value que vem agora do banco de dados ao invés de 10 Pessoas). Commented 11/02/2017 às 17:38
  • @MuriloRavani Cara respondendo a primeira pergunta ali, bom mesmo sendo valor separado na classe, funciona aqui pra mim. Agora a adaptação sua, não tem como eu reproduzir. Você inseriu o jQuery corretamente? Sem ele não vai funcionar mesmo.
    – viana
    Commented 11/02/2017 às 17:43
0

A solução do @Ack funciona perfeitamente em praticamente qualquer situação. Abaixo estou colocando uma solução que funcionaria especificamente no meu caso, que estou utilizando o plugin select2 no meu form:

http://jsfiddle.net/harveyramer/SY47J/

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 .