本文主要是對Select2插件常用使用方法的一些總結。包括其單選、多選、分組顯示、按照拼音搜索功能。並通過測試示例對其效果進行了驗證。
一、效果圖
二、 使用方式
1.使用前需要引入下面幾個插件：
select2.css或者select2.min.css
select2.js或者select2.min.js
jquery-2.0.3.min.js
<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/jquery-2.0.3.min.js"></script>2.如果在使用select2單選搜索時想要能夠按照拼音字母進行搜索，需要引入pinyin.js插件，並對select2.js源碼進行修改。
<script src="../../plugins/pinyin/pinyin.js"></script>pinyin.js下載地址：https://download.csdn.net/download/jianyuerensheng/10381102
select2.js文件修改方式：
將select2.js文件中下面這部分代碼屏蔽掉
var original = stripDiacritics(data.text).toUpperCase();
var term = stripDiacritics(params.term).toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
return data;
}並在上述屏蔽代碼的下面添加以下代碼：
//拼音搜索功能
if (stripDiacritics(data.text).toPinYin === undefined) {
var original = stripDiacritics(data.text).toUpperCase();
var term = stripDiacritics(params.term).toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
return data;
}
} else {
//以下爲拼音搜索功能新增代碼（4866行~4876行）
var original = '';
var original1 = '';
var term = stripDiacritics(params.term).toUpperCase();
if (stripDiacritics(data.text).toPinYin != undefined) {
var result = stripDiacritics(data.text).toPinYin();
original = result[0].indexOf(stripDiacritics(params.term).toUpperCase());
original1 = result[1].indexOf(stripDiacritics(params.term).toUpperCase());
if (original == -1 && original1 == -1) {
original = stripDiacritics(data.text).toUpperCase().indexOf(term);
}
}
// Check if the text contains the term
if (original > -1 || original1 > -1) { //如果匹配則original爲0
return data;
}
}三、常用功能說明
1.常用參數設置含義
tags: true, // 根據搜索框創建option，默認false
maximumSelectionLength: 6, // 最多能夠選擇的個數
multiple: true, // 多選，默認false
data: initdata, // 下拉框綁定的數據
allowClear: true, // 清空，默認false
placeholder: '請添加或選擇語言' // 佔位提示符
maximumInputLength: 20, // 允許搜索長度
minimumResultsForSearch: 20, // 至少20個結果的時候顯示搜索
minimumResultsForSearch: Infinity, // 永久隱藏搜索框
selectOnClose: true, // 結果顯示高亮
closeOnSelect: false, // select選中關閉下拉框
separator: ",", // 分隔符 2.select2事件：
//置空
$eventSelect.val(null).trigger("change");
//選中
$eventSelect.on("selected", function (e) { })
//移除
$eventSelect.on("removed", function () { })
//多個事件
$eventSelect.on("close removed", function () { }) 3.獲取value和text
$("#xa").val();
$("#xa").select2("val");
$("#xa").select2('data').text ;四、測試源碼示例
1.select2Test.html代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select2</title>
</head>
<body>
<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<div>
<label style="width: 100px; font-size: 14px;">單選</label>
<select id="sel_menu" style="width: 400px;" >
<option value=""></option>
</select>
</div>
<div style="margin-top:20px;">
<label style=" width: 100px; font-size: 14px;">多選</label>
<select id="sel_menu2" multiple="multiple" style="width: 400px;"></select>
</div>
<div style="margin-top:20px;">
<label style="width: 100px; font-size: 14px;">多選(含選中項)</label>
<select id="sel_menu3" multiple="multiple" style="width: 400px;"></select>
</div>
<button onclick=getSelectedData() style ="margin-top: 20px;">多選選中值</button>
<div style="margin-top:20px;">
<label style=" width: 100px; font-size: 14px;">分組顯示</label>
<select id="sel_menu4" style="width:400px;"></select>
</div>
<script src="../../plugins/jquery-2.0.3.min.js"></script>
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/pinyin/pinyin.js"></script>
<script src="../../js/select2Test.js"></script>
</body>
</html>2.select2Test.js代碼：
//下拉框數據
var initdata = ["Java", "JavaScript", "C++", "C#", "Python", "PHP"];
//選中數據
var selectedData = ["Java", "PHP"];
//分組下拉框數據（帶ID）
var initGroupDataWithId=[
{ "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },
{ "text": "不熟悉的", "children": [{ "id": 5, "text": "C++" }, { "id": 5, "text": "Python" }, { "id": 5, "text": "GO" }] }
];
//分組下拉框數據
var initGroupData = [
{ "text": "熟悉的", "children": ["Java", "JavaScript", "C#", "PHP"] },
{ "text": "不熟悉的", "children": ["C++", "Python", "GO"] }
];
//初始化頁面加載
$(document).ready(function () {
//初始化select2單選
initSelect2WithSearch();
//初始化select2多選（沒有選中項）
initSelect2();
//初始化select2多選（包含選中項）
select2WithData(selectedData);
});
/**
* 初始化select2單選，默認帶搜索功能。
*/
function initSelect2WithSearch() {
$("#sel_menu").select2({
tags: true,
placeholder: '請搜索或選擇語言',
data: initdata,
allowClear: true
});
}
/**
* 初始化select2多選（沒有選中項）
*/
function initSelect2() {
$("#sel_menu2").select2({
tags: true,
maximumSelectionLength: 5,
placeholder: '請添加或選擇語言',
multiple: true,
maximumInputLength: 10,//允許長度
data: initdata,
});
}
/**
* 初始化select2多選（包含選中項）
*/
function select2WithData(selectedData) {
$("#sel_menu3").select2({
tags: true, //支持新增，默認爲false
maximumSelectionLength: 6, //最多能夠選擇的個數
multiple: true, //支持多選，默認爲false
data: initdata, //下拉框綁定的數據
allowClear: true, //支持清空，默認爲false
placeholder: '請添加或選擇語言' //提示語
}).val(selectedData).trigger('change'); //多選情況下給選中項的賦值
}
/**
* 獲取多選框選中項的值
*/
function getSelectedData() {
var mulSelData = $("#sel_menu3").val().join(",");//獲取多選輸入框選中值的方式
alert("sel_menu3的選中項是：" + mulSelData);
}
/**
* 下拉列表分組顯示
*/
function initSelect2Group() {
$('#sel_menu4').select2({
placeholder: '請選擇',
multiple: true,
data: initGroupData
});
$('#sel_menu4').select2().val(["Java"]).trigger('change');
}3.運行結果：
參考博文：http://blog.csdn.net/u014388408/article/details/50587405