select2插件-简单技巧使用心得

最新推荐文章于 2023-10-05 21:12:00 发布

原创最新推荐文章于 2023-10-05 21:12:00 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#成长

前端基础专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用Select2插件来增强HTML选择框的功能，包括样式美化、多选配置及通过Ajax动态加载数据的方法。文章还展示了如何利用模板函数为每个选项添加额外元素如图片。

<link rel="stylesheet" href="node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/_select2@4.0.6-rc.0@select2/dist/css/select2.css">
<script src="node_modules/_jquery@3.2.1@jquery/dist/jquery.js"></script>
<script src="node_modules/_select2@4.0.6-rc.0@select2/dist/js/select2.js"></script>
<script src="node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.js"></script>

首先引用select2的css和js，select2与bootstrap的使用并不冲突。

HTML

	<select name="" id="c1">
        <option value=""> </option>
		<optgroup label="girl">
		  <option value="vv">1hsdjkdsf</option>
		  <option value="cc">hkjhsd</option>
		  <option value="aa">jksdf</option>
		  <option value="bb">afasfd</option>
		</optgroup>
		<optgroup label="boy">
		  <option value="5">1hsdjkdsf</option>
		  <option value="6">hkjhsd</option>
		  <option value="7">jksdf</option>
		 
		</optgroup>

	</select>
	<input type="button" name="" id="abc">

组别名称为optgroup。

$("#c1").select2({
	width:"200px",
	multiple:true,
	templateResult:function formatState(state){
		console.log(state.id);
		if(!state.id){
			return state.text;
		}
		var state1=$(`<img src="images/${state.id}.png" width="40"><span>${state.text}"111"</span>`);
		return state1;
	}
})

每一个选项都有一个单独的id，multiple属性可以设置为多选。templateResult循环数据，在每个选项前拼接图片地址。

打印出来选中的值为之前html中设置的option的value值。

----------------------------------------------------------------------------------------------------------------------------

使用ajax获取

$.ajax({
	type:"get",
	url:"data.json",
	dataType:"json",
	success:function(res){
		 console.log	(res.results);
		 $("#c1").select2({
		 	data:res.results,
		 	width:"200px",
			multiple:true
		 })

	}
})

在success方法中进行select2插件初始化

data为ajax循环出来的数据

但是此时打印选中的选项出来的结果为当前option的数组索引，无法打印出value。