使用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 ；最后效果如下：

 

 

好吧这下心情好多了~~