[WEB插件]可自定义样式的.Net 多级联动下拉框

jquery的脚本代码（实现下拉框的行为）{文件名:select.js}
(function($) {
    //声明wzjMultiSelect构造函数
    $.wzjMultiSelect = function(select) { this.init(select); };

    //给wzjMultiSelect原型链添加对象
    $.extend($.wzjMultiSelect.prototype, {
        settings: {
            allowMismatch: false,
            cssWrap: "select_box",
            cssSelect: { init: "select", active: "select_active" },
            cssWrapOption: "tag_options",
            cssOption: { init: "option", hover: "option_hover" },
            inputIdTransform: function(id) { return id + "_wzjMultiSelect"; },
            inputNameTransform: function(name) { return; },
            dropdownIdTransform: function(id) { return id + "_wzjMultiSelect_dropdown"; }
        },

        original: null,
        wraper: null,
        select: null,
        hidden: null,
        wrapOption: null,
        options: null,
        timer: null,

        correlat: null,
        cache: [],
        result: [],
        lastAbbreviation: null,

        init: function(select) {
            this.original = $(select);
            this.preloadCache();
            this.renderControls();
            this.wire();
        },

        preloadCache: function() {
            this.cache = this.original.children("option").map(function() {
                var tempParent = "";
                var tempVal = $(this).val();
                var lastIndex = tempVal.indexOf('.');
                if (lastIndex > 0) {
                    tempParent = tempVal.substring(0, lastIndex);
                    //tempVal = tempVal.substring(lastIndex + 1);
                }
                return { name: $.trim($(this).text()), value: tempVal, parent: tempParent };
            });
        },

        renderControls: function() {
            var selected = this.original.children("option:selected");

            this.wraper = $("<div/>").addClass(this.settings.cssWrap);

            this.select = $("<div/>").text(selected.text()).addClass(this.settings.cssSelect.init);

            this.hidden = $("<input type='hidden'/>").attr({
                id: this.original.attr("id"),
                name: this.original.attr("name")
            }).val(selected.val());

            this.wrapOption = $("<div/>").attr({
                id: this.settings.dropdownIdTransform(this.original.attr("id"))
            }).addClass(this.settings.cssWrapOption);

            var indexlast = selected.val().indexOf(".");
            if (indexlast > 0)
                this.filterResults(selected.val().substring(0, indexlast));
            else
                this.renderDropdown(this.cache);

            this.wraper.append(this.select).append(this.hidden).append(this.wrapOption);
            this.original.after(this.wraper).remove();
        },

        renderDropdown: function(options) {
            var list = $("<ul/>");
            for (j = 0; j < options.length; j++) {
                var li = $("<li/>").html(options[j].name).attr("score", options[j].value);
                
                list.append(li);
            }
            this.options = $("li", list);
            this.wrapOption.empty();
            this.wrapOption.append(list);
        },

        wire: function() {
            var self = this;

            self.select.click(function() {
                self.wrapOption.slideToggle();
                self.select.toggleClass(self.settings.cssSelect.active);
            });

            self.select.mouseout(function() {
                self.wrapOptionHide();
            });

            self.select.mouseover(function() {
                if (self.timer) {
                    clearTimeout(self.timer);
                }
            });

            this.optionsClick(self);
        },

        wrapOptionHide: function() {
            var self = this;
            if (self.wrapOption.css("display") == "none")
                return;
            self.timer = setTimeout(function() {
                self.select.removeClass(self.settings.cssSelect.active);
                self.wrapOption.hide();
            }, 2000);
        },

        optionsClick: function() {
            var self = this;
            self.options.each(function() {
                var selfa = self;
                var option = $(this);

                option.hover(function() {
                    option.addClass(selfa.settings.cssOption.hover);
                    if (selfa.timer) {
                        clearTimeout(selfa.timer);
                    }
                }, function() {
                    option.removeClass(selfa.settings.cssOption.hover);
                    selfa.wrapOptionHide();
                });

                option.click(function() {
                    selfa.select.text(option.text());
                    selfa.hidden.val(option.attr("score"));
                    if (selfa.correlat) {
                        var objCorrelat = selfa.correlat;
                        objCorrelat.renderInit(selfa.hidden.val());
                    }
                    selfa.wrapOption.hide();
                    selfa.select.removeClass(selfa.settings.cssSelect.active);
                });
            });
        },

        renderInit: function(val) {
            var indexlast = val.indexOf('.');
            if (indexlast > 0)
                val = val.substring(indexlast + 1);
            this.filterResults(val);
            this.markSelected(0);
            this.optionsClick();
        },

        filterResults: function(valhid) {
            var abbreviation = valhid;
            if (abbreviation == this.lastAbbreviation) return;

            var results = [];
            $.each(this.cache, function() {
                if (this.parent == abbreviation) results.push(this);
            });
            this.results = results;
            this.renderDropdown(this.results);
            this.lastAbbreviation = abbreviation;
        },

        markSelected: function(n) {
            if (n >= this.results.length) return;
            var row = $(this.options[n]);
            if (row) {
                this.select.text(row.text());
                this.hidden.val(row.attr("score"));
                if (this.correlat) {
                    this.correlat.renderInit(this.hidden.val());
                }
            }
        }
    });

    //将wzjMultiSelect函数扩展至jquery中,并定义执行内容
    $.fn.wzjMultiSelect = function() {
        this.each(function() {
            var selectAll = $("ul li select", this);
            var count = selectAll.size();
            if (selectAll && count > 1) {
                var objSelect = [count];
                for (i = count - 1; i >= 0; i--) {
                    objSelect[i] = new $.wzjMultiSelect(selectAll[i]);
                    if (i == count - 1)
                        continue;
                    objSelect[i].correlat = objSelect[i + 1];
                }
            }
            return this;
        })
    };
}
        )(jQuery);
Css代码{文件名：select.css}
*
{
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.select_box
{
    cursor: pointer;
}
.tag_options
{
    z-index: 100;
    position: absolute;
    display: none;
    background-position: -130px bottom;
    background-repeat: no-repeat;
    width: 128px;
    padding: 2px 0 10px 2px;
}
.tag_options ul
{
    list-style: none;
}
.tag_options option
{
    float: left;
    display: inline;
    width: 110px;
    padding: 0 8px;
    height: 20px;
    line-height: 20px;
    text-align: left;
}
.tag_options li
{
    width: 100%;
    line-height: 1.5;
    text-indent: 6px;
}
.tag_options .option_hover
{
    background: #ccc;
    color: #fff;
}
.select
{
    display: block;
    color: #798C90;
    width: 110px;
    height: auto !important;
    height: 20px;
    min-height: 20px;
    background-position: 0 0;
    background-repeat: no-repeat;
    line-height: 20px;
    padding: 0 10px;
}
.select_active
{
    display: block;
    color: #798C90;
    width: 110px;
    height: 20px;
    background-position: 0 -20px;
    background-repeat: no-repeat;
    line-height: 20px;
    padding: 0 10px;
}
.tag_options, .select
{
    background-image: url(../select.gif);
}
/*===================下拉框样式=====================*/

.multilevel
{
    width: 800px;
    margin: 50px auto 50px auto;
}
.multilevel ul
{
    list-style: none;
}
.multilevel ul li
{
    float: left;
    margin-right: 10px;
}
/*===================框架样式=====================*/
Code 链接图片:{文件名：select.gif}

Html代码（使用.net控件)
<head runat="server">
    <title>多级联动下拉框</title>
    <link type="text/css" rel="Stylesheet" href="select.css" />
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="select.js"></script>
    
    <script type="text/javascript">
        $(function() { $(".multilevel").wzjMultiSelect(); })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="multilevel">
        <ul>
            <li>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Selected="True" Value="1">游戏１</asp:ListItem>
                    <asp:ListItem Value="2">游戏２</asp:ListItem>
                    <asp:ListItem Value="3">游戏３</asp:ListItem>
                </asp:DropDownList>
            </li>
            <li>
                <asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem Selected="True" Value="1.4">游戏1电信</asp:ListItem>
                    <asp:ListItem Value="1.5">游戏1网通</asp:ListItem>
                    <asp:ListItem Value="2.6">游戏2电信</asp:ListItem>
                    <asp:ListItem Value="2.7">游戏2网通</asp:ListItem>
                    <asp:ListItem Value="3.8">游戏3电信</asp:ListItem>
                    <asp:ListItem Value="3.9">游戏3网通</asp:ListItem>
                </asp:DropDownList>
            </li>
            <li>
                <asp:DropDownList ID="DropDownList3" runat="server">
                    <asp:ListItem Value="4.10">雪山飞狐</asp:ListItem>
                    <asp:ListItem Selected="True" Value="4.11">浪客剑心</asp:ListItem>
                    <asp:ListItem Value="4.12">世纪佳缘</asp:ListItem>
                    <asp:ListItem Value="5.13">古墓丽影</asp:ListItem>
                    <asp:ListItem Value="5.14">哆啦A梦</asp:ListItem>
                    <asp:ListItem Value="5.15">风花雪月</asp:ListItem>     
                    <asp:ListItem Value="6.16">泡泡卡丁车</asp:ListItem>
                    <asp:ListItem  Value="6.17">卡拉</asp:ListItem>
                    <asp:ListItem Value="6.18">中心地代</asp:ListItem>         
                    <asp:ListItem Value="7.19">火山爆发</asp:ListItem>
                    <asp:ListItem Value="7.20">丁丁地图</asp:ListItem>
                    <asp:ListItem Value="7.21">笑傲江湖</asp:ListItem>
                    <asp:ListItem Value="7.22">十面埋妇</asp:ListItem>       
                    <asp:ListItem Value="8.23">鹿鼎记</asp:ListItem>
                    <asp:ListItem Value="8.24">飞天哉</asp:ListItem>
                    <asp:ListItem Value="8.25">封神榜</asp:ListItem>
                    <asp:ListItem Value="8.26">魔兽</asp:ListItem>
                    <asp:ListItem Value="8.27">卡卡</asp:ListItem>
                    <asp:ListItem Value="8.28">火载</asp:ListItem>
                    <asp:ListItem Value="9.29">狂人</asp:ListItem>
                    <asp:ListItem Value="9.30">枯水期</asp:ListItem>
                </asp:DropDownList>
            </li>
            <li>
                <asp:Button ID="Button1" runat="server" Text="提交" onclick="Button1_Click" />
            </li>
        </ul>
    </div>
    </form>
</body>
</html>
因本人是.Net程序员，而我们在开发过程中经常会遇到需要多级联动的下拉框。比如：地区选择、服务器选择等等，故创作了此控件。
目的只是让以后的开发更方便。
最后是浏览后的显示效果：
posted @ 2009-09-28 14:25  小滞  阅读(1171)  评论(1)    收藏  举报