Can't show specific div on click of a drop down link

Question

I have a dropdown menu that I want to show a different div for every link you select. The divs are successfully hidden, but they are not showing on click... Anyone have an idea?

HTML

<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
<option value="-1" selected>The drop down menu</option>
<option value="1" class="icon-monkey">Choice 1</option>
<option value="2" class="icon-bear">Choice 2</option>
<option value="3" class="icon-squirrel">Choice 3</option>
<option value="4" class="icon-elephant">Choice 4</option>
</select>

<div id="1" class="box">Content 1</div>
<div id="2" class="box">Content 2</div>
<div id="3" class="box">Content 3</div>
<div id="4" class="box">Content 4</div>

JAVASCRIPT

$(function () {
    $('#cd-dropdown').dropdown({
        gutter: 1,
        stack: false
    });
});
$(document).ready(function () {
    $('.box').hide();
    $('#cd-dropdown').change(function () {
        $('.box').hide();
        $('#' + $(this).val()).show("slow");
    });
});

Answer 1

Working fiddle
jQuery

$(function () {
    $('#cd-dropdown').dropdown({
        gutter: 1,
        stack: false
    });
    $('.box').hide();
    $('.cd-dropdown ul li').click(function () {
        $('.box').hide();
        $('#' + $(this).data("value")).show("slow");
    });
});  

The plugin which you are using converts the dropdown in div and then does the required animation... you can check it out using Firebug...