jquery - Css jquery 组合框

Question

我正在尝试使用 css 和 jquery 创建一个组合框。我将有 3 个元素，我需要有关在组合框中选择元素和显示所选元素的帮助。任何帮助将不胜感激。我的完整代码是

http://jsfiddle.net/vmCBJ/

 $(function () {
        $('#clickIcon').click(function() {

        });
        $("ul.dropdown li").click(function () {
            $(this).addClass("hover");
            $('ul:first', this).css('visibility', 'visible');

        }, function () {

            $(this).removeClass("hover");
            $('ul:first', this).css('visibility', 'hidden');

        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

    });


<div id="page-wrap">
    <span>
        <ul class="dropdown">
            <li><a href="#">Cannot</a>
                <ul class="sub_menu">
                    <li>
                        <a href="#">Can</a>
                    </li>
                    <li>
                        <a href="#">Must</a>
                    </li>

                </ul>
            </li>

        </ul>
    </span>
    <span id="clickIcon" style="background-color: gray;padding-left: 5px;font-weight: 900;">
        V
    </span>
</div>

Answer 1

我的解决方案... http://jsfiddle.net/K2ndZ/

我已经重建了它，因此功能应该相当清晰。但是，您应该知道，如果用户的浏览器上没有 javascript，这个解决方案就会崩溃……下拉菜单不是更好的选择吗？

HTML

<div class="combobox">
    <div class="selector">Please select</div>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

CSS

.combobox {cursor:pointer;display:inline-block;}
.combobox .selector{border:1px solid #cccccc;padding: 2px 5px}
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;}
.combobox li {padding: 2px 5px}

jQuery

$(document).ready(function(){
    $('.combobox ul').hide();
    $('.combobox').hover(
        function(){
            $(this).find('ul').stop().slideDown();
        },
        function(){
            $(this).find('ul').stop().slideUp();
        }
    );
    $('.combobox li').click(function(){
        $(this).parents('.combobox').find('.selector').text($(this).text());
    });
});