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

一、概述

在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");

（完）

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

一、概述

二、使用

配置參數

方法

Mybatis PageHelper（MyBatis 分頁插件）的使用

Spring MVC數據綁定問題（實體中包含集合數據綁定問題）

IntelliJ IDEA 18 週歲，吐血推薦珍藏已久的必裝插件

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

Java獲取resources資源文件夾下的文件和文件流（Maven項目）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結