本文共 3086 字，大约阅读时间需要 10 分钟。

一、概述

在web项目中很多地方用到下拉框，原生的下拉框比较丑陋，之前的文章中介绍过一款用来美化下拉框的插件可以参考：

。

有时业务需要下拉框内容是分组显示，如显示部门名称和部门下人员名称，则需要使用<select> 、<optgroup>、<option>同时使用来达到效果，代码如下：

            王小二        刘大拿        齐东强        三麻子                齐德龙        赵大帅        五毛子        小二黑    

效果：

但是效果和功能比较单一，今天给大家介绍一款好看功能灵活的插件名字是select-mania。

select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框，并且转换后的下拉选择框带搜索功能，可通过AJAX获取数据，带多种主题，还可以自定义主题等。

可以去其官网查看API和使用，下载使用地址：

使用后的效果如下：

可以换主题颜色，还有其他功能可以参考API。

二、使用

1.从官网上下载所需文件。

2.引入css/js到页面，多个主题，我只引入了一个：

3.页面内容：

                        王小二            刘大拿            齐东强            三麻子                            齐德龙            赵大帅            五毛子            小二黑            

4.调用插件，第二个方法是自己加的是用来点击“部门“显示、隐藏员工的方法，其他的属性参考API：

全部代码：

	
   			
   	
   	 	                        王小二            刘大拿            齐东强            三麻子                            齐德龙            赵大帅            五毛子            小二黑             

 配置参数

select-mania下拉选择框插件的可用配置参数如下：

ajax参数：为了使用ajax参数，你必须向下面这样设置ajax参数：

function(search, page, data, callback) {    //send back html options to select-mania    callback(hmtlOptions);}

这个函数有4个参数：

• search：当前搜索框中的值。
• page：请求的页码。
• data：提供自定义数据。
• callback：成功之后的回调函数。

执行成功之后的回调函数中的数据必须是一串HTML代码或jQuery / Dom元素。例如：

ajax: function(search, page, data, callback) {    $.ajax({        type: "POST",         url: "查询搜索的地址",         data: {            search: search,             page: page,             param: 自定义参数        },         success: function(html) {            // html是标签的集合            // 如王小二            callback(html);        }    });}

方法

select-mania下拉选择框插件的可用方法有：

• init：初始化方法。

//simple call$("target-selector").selectMania({__regexoperators___/*settings*/});//explicit call$("target-selector").selectMania("init", {__regexoperators___/*settings*/});

• update：在目标元素上更新插件。

$("target-selector").selectMania("update");

• destroy：销毁指定的select-mania下拉选择框。

$("target-selector").selectMania("destroy");

• check：这个方法只能在单一元素上使用，返回true表示目标元素上已经进行了初始化。

if($("target-selector").selectMania("check")) {    // select-mania is initialized!}

• get：这个方法只能在单一元素上使用，用于获取当前选择的值。

var values = $("select").selectMania("get");// 也可以这样取值$('select').val();

• set：这个方法只能在单一元素上使用，用于为下拉选择框设置新的值。

$("target-selector").selectMania("set", [    {        value: "20",         text: "Value number twenty"    },     {        value: "60",         text: "Value number sixty"    }]);

• clear：在目标元素上情况已选择的值，重置时使用。

$("target-selector").selectMania("clear");

（完）

转载地址：http://hqhgf.baihongyu.com/