select switch element visibility

by jorgeluis

HTML

<label for="options">Pick a color</label>
<select id="options" name="form_select">
   <option value="">...</option>
   <option value ="123">red</option>
   <option value ="456">blue</option>
   <option value ="789">green</option>
</select>

<div id="choices">
    <div id="123" style="display: none;">RED</div>
    <div id="456" style="display: none;">BLUE</div>
    <div id="789" style="display: none;">GREEN</div>
</div>

JavaScript

$('#options').on('change', function () {
    $('#choices > div').hide();
    var choiceId = '#' + this.value;
    $(choiceId, '#choices').fadeIn();
});