When clicking an option from a list, hide options from another select

Question

I would like, for example, when choosing the option '10 people' in the select 'Size', I could hide specific options in the selects 'Model', 'Fillings', 'Options to Drain' and 'Decoration'.

Example:

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

Answer 1

See an idea of what it would be like to solve this problem:

$('#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>

I created a file called Combodinamic and put it on Github just for the record.

Answer 2

The @Ack solution works perfectly in virtually any situation. Below I am putting a solution that would work specifically in my case, I am using the plugin Select2 in my form:

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