Comment écrire le jquery pour le suivant

Question

Je suis nouveau dans l'utilisation de jquery, je veux cacher une division particulière lorsqu'un élément particulier d'une liste déroulante est sélectionné, je veux aussi augmenter la taille de la colonne adjacente lorsque le particulier est caché.

$(function() {
    $('#d1').change(function() {
        $('#group3').hide();
        $('#' + $(this).val()).show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group1" id="d1">
    <select class="cls1">
        <option value="">Type</option>
        <option value="QS">1</option>
        <option value="SP">2</option>
        <option value="XL">3</option>
    </select>
</div>

<div class="div2">
    <div class="group2" , width="50%">
        Division2: Hide when 3 is selected
    </div>

    <div class="group3" , width="50%">
        Hide when 1 or 2 is selected
    </div>
</div>

mais cela cache la division group3 à chaque fois Comment puis-je le changer pour qu'il cache différentes divisions selon mon choix ?