Show Div Based on Select Option

Choose a drop down selection to make a div with the same value display.

by Colin Soderstrom

HTML

<select id="colorselector">
   <option value=""></option>
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
</select>
<div id="red" class="colors" style="display:none"> Red </div>
<div id="green" class="colors" style="display:none"> Green </div>
<div id="blue" class="colors" style="display:none"> Blue </div>

CSS

select {
    margin: 10px;
}
#red {
    background-color: red;
}
#green {
    background-color: green;
}
#blue {
    background-color: blue;
}
.colors {
    margin: 10px;
    padding: 5px;
    color: white;
    font-family: arial;
    width: 100px;
    height: 50px
}

JavaScript

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