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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I would like, for example, that by choosing the '10 people 'option in select' Size ', I could hide specific options in the selects' Template ',' Fillings ',' Options to Drain 'and' / p>

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>

jquery jquery-select2

asked by anonymous 11.02.2017 / 03:32

2 answers

2

Here's an idea of how it would 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çãocomostamanho-->Tamanhos:<selectid="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 ComboDynamic and put it on GitHub just to stay logged in.

11.02.2017 / 05:50

have you declared this activity in your AndroidManifest.xml? How to modify a list in the global scope using a function? Python 3

score 0 · Accepted Answer

0

The @Ack solution works perfectly in almost any situation. Below I'm putting a solution that would work specifically in my case, I'm using the select2 plugin in my form:

link

12.02.2017 / 20:25