select下拉框分组展示插件的使用--(select-mania插件的使用)

最新推荐文章于 2021-07-08 10:44:56 发布

原创最新推荐文章于 2021-07-08 10:44:56 发布 · 4.8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#下拉框分组 #select分组 #下框框分组美化

前端知识专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一款名为select-mania的jQuery插件，用于美化和增强Web项目中的下拉框功能，包括分组显示、搜索、多主题切换及自定义主题等功能。

一、概述

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

手把手教你--jquery chosen插件的使用和API(html下拉框美化）。

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

<select class="select">
    <optgroup label="技术部">
        <option value="1">王小二</option>
        <option value="2">刘大拿</option>
        <option value="3">齐东强</option>
        <option value="4">三麻子</option>
    </optgroup>
    <optgroup label="人事部">
        <option value="5">齐德龙</option>
        <option value="6">赵大帅</option>
        <option value="7">五毛子</option>
        <option value="8">小二黑</option>
    </optgroup>
</select>

效果：

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

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

可以去其官网查看API和使用，下载使用地址：https://github.com/pitininja/select-mania

使用后的效果如下：

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

二、使用

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

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

<link href="css/select-mania.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script src="js/select-mania.min.js"></script>

3.页面内容：

<body>
    <select class="select">
        <optgroup label="技术部">
            <option value="1">王小二</option>
            <option value="2">刘大拿</option>
            <option value="3">齐东强</option>
            <option value="4">三麻子</option>
        </optgroup>
        <optgroup label="人事部">
            <option value="5">齐德龙</option>
            <option value="6">赵大帅</option>
            <option value="7">五毛子</option>
            <option value="8">小二黑</option>
        </optgroup>
    </select>
</body>

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

<script type="text/javascript">
	$('.select').selectMania({
		size: 'small', // 尺寸(小)
		themes: ['darkblue'], //主题
		placeholder: '请选择...',//默认文字
		removable: true,//是否可清除
		search: true,//是否可搜索
	});
    
    // 以下内容是自己加的 点击部门展开/隐藏部门下员
	$('.select-mania-group-title').on('click',function(){
		$(this).next().toggle();
	});
</script>

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉分组插件</title>
	
	<link href="css/select-mania.css" rel="stylesheet" type="text/css">
	<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
	<script src="js/select-mania.min.js"></script>

</head>
<body>
    <select class="select">
        <optgroup label="技术部">
            <option value="1">王小二</option>
            <option value="2">刘大拿</option>
            <option value="3">齐东强</option>
            <option value="4">三麻子</option>
        </optgroup>
        <optgroup label="人事部">
            <option value="5">齐德龙</option>
            <option value="6">赵大帅</option>
            <option value="7">五毛子</option>
            <option value="8">小二黑</option>
        </optgroup>
    </select>
</body>
 
<script type="text/javascript">
	$('.select').selectMania({
		size: 'small', // 尺寸(小)
		themes: ['darkblue'], //主题
		placeholder: '请选择...',//默认文字
		removable: true,//是否可清除
		search: true,//是否可搜索
	});
    
    // 以下内容是自己加的 点击部门展开/隐藏部门下员
	$('.select-mania-group-title').on('click',function(){
		$(this).next().toggle();
	});
</script>
</html>

配置参数

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

参数	默认值	描述
width	"100%"	下拉选择框的宽度。必须是有效的CSS长度值。可以在select元素上通过`data-width`属性来使用。
size	"medium"	下拉选择框的尺寸。可选值有："tiny", "small", "medium", "large"。可以在select元素上通过`data-size`属性来使用。
themes	[]	主题名称的数组。主题的名称可以在`select-mania-theme-[主题名称].css`找到。你也可以自己创建一个主题。
scrollContainer	null	select下拉框可滚动的容器的选择器或元素。
placeholder	"Select an item"	占位符文本。可以在select元素上通过`data-placeholder`属性来使用。
removable	false	设置为`true`时可以删除已选择的选项。可以在select元素上通过`data-removable`属性来使用。
empty	false	设置为`true`时将强制在初始化时情况选项。可以在select元素上通过`data-empty`属性来使用。
search	false	设置为`true`时将显示搜索框，并允许进行选项搜索。可以在select元素上通过`data-search`属性来使用。
ajax	false	插件可以在选项向下滚动时通过ajax来调用数据，并执行ajax查询。关于ajax参数，请看后面的详细解释。
data	{}	该参数作为ajax的参数使用。

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是<option>标签的集合
            // 如<option value="1">王小二</option>
            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");

（完）