show/hide div based on select option jquery

by Emmanuel Garcia

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <div><label>Select Menu</label><select>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select></div>
<div class="red box"><strong>Activities for adults at the Pool Bar.</strong>
<p class="p2"><strong>Note:</strong> All the activities are subject to change without previous notice. <strong>*</strong> Activities available for $37 Mexican pesos per person.</p></div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box"><strong>Activities for Kids.</strong>
</div>

CSS

.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    select{width:100%; height:auto;}

JavaScript

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});