Javascript 单击下拉链接时无法显示特定div

我有一个下拉菜单，我想为你选择的每个链接显示一个不同的div。div已成功隐藏，但单击时不会显示它们。。。有人有主意吗

HTML

jQuery

---

您正在使用的插件转换div中的下拉列表，然后执行所需的动画。。。您可以使用Firebug…

为什么单独的doc ready调用以及这是什么$'cd-dropdown'。dropdown{？如果您删除$function{$'cd-dropdown'。dropdown{goot:1，stack:false}；}；它似乎可以正常工作。我认为值应该以字母开头。请尝试box1等。如果删除$。下拉调用，则它可以正常工作。它来自哪个库，或者该函数的作用是什么？@Anthony-数字ID在HTML5中可以正常工作。它来自这里：

<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>

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

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