下一主题 抛弃select元素，JQuery与CSS相结合的下拉框

对于我来说，标准的HTML元素（Select）已经让我感到讨厌。它不能够正常的在IE浏览器上显示。

还有一点就是他并不仅仅包含简单的文本。这就是我必须去彻底改造DropDown这个元素的原因。

      本实例将完全摒弃select元素，通过jquery和CSS来构建DropDown元素。

在线演示：http://www.websjy.com/club/websjy_index/DropDown/

 

JS代码：

$(document).ready(function() {
            $(".dropdown img.flag").addClass("flagvisibility");
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });
                         
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });
                         
            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }
            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });
            $("#flagSwitcher").click(function() {
                $(".dropdown img.flag").toggleClass("flagvisibility");
            });
        });

 下载：