select2 案例及注意事项、首字母搜索

最新推荐文章于 2021-06-02 00:28:31 发布

面条请不要欺负汉堡

最新推荐文章于 2021-06-02 00:28:31 发布

阅读量3.8k

点赞数

分类专栏：框架/插件使用文章标签： select2 小案例

本文链接：https://blog.csdn.net/gao_xu_520/article/details/80798898

版权

框架/插件使用专栏收录该内容

32 篇文章 0 订阅

订阅专栏

select2是一个非常好用的下拉框插件，支持很多功能。

官方文档，例子：http://select2.github.io/select2/

一.select2 案例

1.单选

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
    <meta name="renderer" content="webkit|ie-comp|ie-stand">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
    <meta http-equiv="Cache-Control" content="no-siteapp" />  
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="../dist/css/select2.min.css" rel="stylesheet">
</head>  
<body>  
<div id="body" style="margin: 20px auto; width: 400px;">  
    <select id="e8"  class="combox">
	    <optgroup label="水果">  
	        <option value="苹果">苹果</option>  
	        <option value="梨">梨</option>  
	        <option value="香蕉">香蕉</option>  
	        <option value="西瓜">西瓜</option>  
	    </optgroup>  
	    <optgroup label="蔬菜">  
	        <option value="上海青">上海青</option>  
	        <option value="南瓜">南瓜</option>  
	        <option value="西红柿">西红柿</option>  
	        <option value="茄子">茄子</option>  
	    </optgroup>  
	    <optgroup label="书籍">  
	        <option value="温暖的炫">温暖的炫</option>  
	        <option value="从我身边路过">从我身边路过</option>  
	        <option value="钢铁是怎么样练成">钢铁是怎么样练成</option>   
	    </optgroup>  
	</select>
</div>  
    <script src="../dist/js/jQuery-2.1.4.min.js"></script>
    <script src="../dist/js/select2.full.min.js"></script>
<script type="text/javascript">  
$(function(){  
	$("#e8").select2();
});  
</script>  
</body>  
</html>

通过初始化获取数据

(1)data获取数据

<select id="yblx00" name="yblx00" class="combox form-control" style="width:100%" >
	<option></option>>    
</select> 

var dataList = [
	{ "id": 1001, "text": "医保1" },
	{ "id": 1002, "text": "医保2" },
	{ "id": 1003, "text": "医保3" },
	{ "id": 1004, "text": "医保4" },
	{ "id": 1005, "text": "医保5" }
];
	
$("#yblx00").select2({
    data: initData,
    placeholder:'请选择医保类型',//默认文字提示
    language: "zh-CN",//汉化
    allowClear: true//允许清空
});	<option></option>>    
</select> 

var dataList = [
	{ "id": 1001, "text": "医保1" },
	{ "id": 1002, "text": "医保2" },
	{ "id": 1003, "text": "医保3" },
	{ "id": 1004, "text": "医保4" },
	{ "id": 1005, "text": "医保5" }
];
	
$("#yblx00").select2({
    data: initData,
    placeholder:'请选择医保类型',//默认文字提示
    language: "zh-CN",//汉化
    allowClear: true//允许清空
});

(2).通过ajax

processResults 选项将API返回的数据转换为Select2期望的格式

select.json

[
	{ "id": 1001, "text": "医保1" },
	{ "id": 1002, "text": "医保2" },
	{ "id": 1003, "text": "医保3" },
	{ "id": 1004, "text": "医保4" },
	{ "id": 1005, "text": "医保5" }
]

$("#yblx00").select2({
	ajax: {
		url: "select.json",
		dataType: 'json',
		type:'GET',
		delay: 250,
		data: function (params) {
			return {
				q: params.term,
			};
		},
		processResults: function (data) {
			var arr=[];
			for(var =0;i<data.length;i++){
				arr.push({"id":data[i].id,"text":data[i].value0]})
			}
			// 后端返回值改成 select2插件想要的格式
			return {
				results: arr
			};
		},
		cache: true
	}, 
	placeholder:'请选择医保类型',//默认文字提示
	formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
	formatSelection: function formatRepoSelection(repo){return repo.text;}, // 函数用于呈现当前的选择
	allowClear: true//允许清空
});

2.多选

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
    <meta name="renderer" content="webkit|ie-comp|ie-stand">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
    <meta http-equiv="Cache-Control" content="no-siteapp" />  
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="../dist/css/select2.min.css" rel="stylesheet">
</head>  
<body>  
<div id="body" style="margin: auto; width: 400px;">  
    <select id="e14" multiple style="width:300px" class="populate">
	    <optgroup label="水果">  
	        <option value="苹果">苹果</option>  
	        <option value="梨">梨</option>  
	        <option value="香蕉">香蕉</option>  
	        <option value="西瓜">西瓜</option>  
	    </optgroup>  
	    <optgroup label="蔬菜">  
	        <option value="上海青">上海青</option>  
	        <option value="南瓜">南瓜</option>  
	        <option value="西红柿">西红柿</option>  
	        <option value="茄子">茄子</option>  
	    </optgroup>  
	    <optgroup label="书籍">  
	        <option value="温暖的炫">温暖的炫</option>  
	        <option value="从我身边路过">从我身边路过</option>  
	        <option value="钢铁是怎么样练成">钢铁是怎么样练成</option>   
	    </optgroup>  
	</select>
</div>  
    <script src="../dist/js/jQuery-2.1.4.min.js"></script>
    <script src="../dist/js/select2.full.min.js"></script>
<script type="text/javascript">  
$(function(){  
// 1.默认选中
setTimeout(function(){
	$("#e14").val(["苹果","温暖的炫"]).select2();
},100)
	//2.获取选中的值
	var selected = $("#e14").select2("data");//选择的值
    var arr=[];
    for (var i=0;i<selected.length;i++) {
        arr.push(selected[i].text);
    }
	console.log(arr)
});  
</script>  
</body>  
</html>

通过初始化获取数据

(1)data获取数据

 <select id="aae376"  multiple style="width:100%" class="populate" >
 <option></option>    
 </select>
	
var initData=[
        { "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },
        { "text": "不熟悉的", "children": [{ "id": 2, "text": "C++" }, { "id": 6, "text": "Python" }, { "id": 7, "text": "GO" }] }
    ];
$("#aae376").select2({
	data: initData,
	placeholder:'请选择医保类型',//默认文字提示
	language: "zh-CN",//汉化
	allowClear: true//允许清空
});

(2).通过ajax

select.json

[
    { "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": 6, "text": "Python" }, { "id": 7, "text": "GO" }] }
]

$("#aae376").select2({
        ajax: {
            url: "select.json",
            dataType: 'json',
            type:'GET',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                };
            },
            processResults: function (data) {
                console.log(data)
                return {
                    results: data
                };
            },
            cache: true
        }, 
        placeholder:'请选择医保类型',//默认文字提示
        formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
        formatSelection: function formatRepoSelection(repo){return repo.text;}, // 函数用于呈现当前的选择
        allowClear: true//允许清空
    });

3.添加首字母搜索

a.添加pinyin.js 插件下载地址

b.修改插件

function matcher (params, data) { 里面最后一块换成：

var original = '',term = stripDiacritics(params.term).toUpperCase();
        if (stripDiacritics(data.text).toPinYin != undefined) 
        original = stripDiacritics(data.text).toPinYin().indexOf(stripDiacritics(params.term).toUpperCase());
        if(original==-1){
        original = stripDiacritics(data.text).toUpperCase().indexOf(term);
        }
        return original>-1?data:null;

二.注意事项

1.初始化是不选择

<select id="yytssx"  class="combox">
    <option disabled selected value></option>
</select>

2.在BootStrap的modal中使用Select2搜索框无法输入

一般有两方面的原因
A.检查下modal的div中是否有tabindex=”-1”，这个属性,如果有，则把这个属性去掉，

<div class="modal fade in" id="dialog-new-draft">
B.js代码中加入

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

参考：

Select2学习总结

面条请不要欺负汉堡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select2 案例及注意事项、首字母搜索

select2是一个非常好用的下拉框插件，支持很多功能。官方文档，例子：http://select2.github.io/select2/一.select2 案例1.单选<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="...
复制链接

扫一扫