Select with multiple JS values

Question

I really need your help. I made a select in JS and it works correctly, the problem is that it selects only one content and what I need is that when selecting the filter of an option it displays all related content.

Follow below the code I made, just to show my idea.

$(function() {
    $('.form-control').change(function(){
        $('.blocos').hide();
        $('#' + $(this).val()).show();
    });
});

<style type="text/css">

    .blocos {
        display: none;
    }

    .grupos {
        display: flex;
        justify-content: space-around
    }

    #grupo-azul {
        width: 200px;
        height: 200px;
        background-color: blue
    }

    #grupo-verde {
        width: 200px;
        height: 200px;
        background-color: green
    }

    #grupo-amarelo {
        width: 200px;
        height: 200px;
        background-color: yellow
    }

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
<div class="form-group">
    <label>Selecione a unidade</label><br>
    <select class="form-control" id="list-lugar" name="unidade">
        <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
        <option name="grupo-azul" value="grupo-azul">Todos os azuis</option>
        <option name="grupo-verde" value="grupo-verde">Todos os verdes</option>
        <option name="grupo-amarelo" value="grupo-amarelo">Todos os Amarelos</option>
    
    </select>
</div>

<div class="grupos">
    <div id="grupo-azul" class="blocos"></div>
    <div id="grupo-verde" class="blocos"></div>
    <div id="grupo-amarelo" class="blocos"></div>
    <div id="grupo-azul" class="blocos"></div>
    <div id="grupo-amarelo" class="blocos"></div>
    <div id="grupo-verde" class="blocos"></div>
</div>

Please, you can help me?

Answer 1

The id of an element is a unique identifier (better explanations) and you have placed several elements with the same id, so your script will look for the first element with that id informed and apply the actions in it, so the action is executed in only one element. In this situation I recommend changing the selector to class

<div class="grupos">
    <div class="blocos grupo-azu"></div>
    <div class="blocos grupo-verde"></div>
    <div class="blocos grupo-amarelo"></div>
    <div class="blocos grupo-azul"></div>
    <div class="blocos grupo-amarelo"></div>
    <div class="blocos grupo-verde"></div>
</div>

And in his script change the selector of # for ., so that it can be referred to classe and not the id

$('.' + $(this).val()).show();

.grupo-azul {}

With the corrections applied:

 
 $(function() {
        $('.form-control').change(function(){
           $('.blocos').hide();
            $('.' + $(this).val()).show();

        });
    });

<style type="text/css">

    .blocos {
        display: none;
    }

    .grupos {
        display: flex;
        justify-content: space-around
    }

    .grupo-azul {
        width: 200px;
        height: 200px;
        background-color: blue
    }

    .grupo-verde {
        width: 200px;
        height: 200px;
        background-color: green
    }

    .grupo-amarelo {
        width: 200px;
        height: 200px;
        background-color: yellow
    }

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
<div class="form-group">
    <label>Selecione a unidade</label><br>
    <select class="form-control" id="list-lugar" name="unidade">
        <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
        <option name="grupo-azul" value="grupo-azul">Todos os azuis</option>
        <option name="grupo-verde" value="grupo-verde">Todos os verdes</option>
        <option name="grupo-amarelo" value="grupo-amarelo">Todos os Amarelos</option>
  
    </select>
</div>

<div class="grupos">
    <div class="blocos grupo-azu"></div>
    <div class="blocos grupo-verde"></div>
    <div class="blocos grupo-amarelo"></div>
    <div class="blocos grupo-azul"></div>
    <div class="blocos grupo-amarelo"></div>
    <div class="blocos grupo-verde"></div>
</div>