点击下拉链接无法显示特定div

Question

我有一个下拉菜单，我想为您选择的每个链接显示不同的div。 div已成功隐藏，但它们没有显示点击...任何人都有想法？

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");
    });
});  

您正在使用的插件会转换dropdown in div，然后执行所需的动画...您可以使用Firebug来查看...