使用Chose来美化Select

Select 控件在每个浏览器里面表现都不一样，和网站的整体风格非常不协调。

今天有点时间，就使用Chose把网站前端的Select都美化了一番， ^_^

 

Chose 目前在Github里面关注度非常高，项目演示地址是：http://harvesthq.github.com/chosen/

 

使用起来也非常简单：

首先我在Head区引入样式：

<% this.AddClientCss("/style/chosen.css"); %>

 

然后在页面底部引入脚本：

<% this.AddClientScript("/Js/chosen/chosen.jquery.min.js"); %>

 

最后再调用就行了：

$(function () {
         $("#ClassID").chosen();
});

由于我的Option是动态加载的，所以后来改成了这样：

 

function fnLoadClass() {
            var url = "http:// myapi address";
            $.ajax({
                url: url,
                data: null,
                dataType: "json",
                success: function (res) {
                    if (res.success == true) {
                        var html = "<option value=''>请选择分类...</option>";
                        for (var i = 0; i < res.items.length; i++) {
                            html += "<optgroup  label='" + res.items[i].Title + "'>";
                            for (var j = 0; j < res.items[i].Childrens.length; j++) {
                                var citem = res.items[i].Childrens[j];
                                html += "<option value='" + citem.InfoID + "'>" + citem.Title + "</option>";
                            }
                            html += "</optgroup>";
                        }
                        $("#ClassID").html(html);
                        $("#ClassID").chosen();
                    }
                    else {
                        alert(res.msg);
                    }
                },
                error: function () {
                    alert("发生错误，请刷新重试！");
                }
            });
        }

 

也就是在AJAX返回结果以后，再使用 chose ；最后效果如下：

 

 

好吧这下心情好多了~~