美化的下拉框select2

最新推荐文章于 2024-09-26 13:58:48 发布

刘正权

最新推荐文章于 2024-09-26 13:58:48 发布

阅读量1.3w

点赞数 2

文章标签： select2

本文链接：https://blog.csdn.net/liu765023051/article/details/46591557

版权

今天，向大家介绍一款简单、实用的bootstrap风格的JQuery插件——select2。

select2是对select下拉框的改进。如果你对界面的美感又一定要求，你一定会抛弃select，坚决的选择select2阵营。

select2的使用非常简单。我将它在项目中的应用总结成了两个demo，你一定会为它的简单实用大为震惊。

github上入门级demo：http://select2.github.io/

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="select2.min.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="select2.js"></script>
</head>
<body>
<div id="body">
<table class="table table-bordered table-striped" width="800" border="none" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td align="right">多选标签——火影忍者：</td> 
			<td>
				<select class="combox" id="sel_productTag" name="tagId" multiple> 
					<optgroup label="小辈儿组">
						<option value="kakaxi">卡卡西</option>
						<option value="mingren">鸣人</option>
						<option value="zuozhu">佐助</option>
						<option value="xiaoying">小樱</option>
					</optgroup>
					<optgroup label="大辈儿组">
						<option value="bofengshuimen">波风水门</option>
						<option value="dashewan">大蛇丸</option>
						<option value="gangshou">纲手</option>
						<option value="自来也">自来也</option>
					</optgroup>
				</select>
			</td>
		</tr>
		<tr>
			<td align="right">单选标签——火影忍者：</td>
			<td>
				<select class="combox" id="sel_recommender" name="recommenderId"> 
					<option value="">请选择...</option>
					<optgroup label="小辈儿组">
						<option value="kakaxi">卡卡西</option>
						<option value="mingren">鸣人</option>
						<option value="zuozhu">佐助</option>
						<option value="xiaoying">小樱</option>
					</optgroup>
					<optgroup label="大辈儿组">
						<option value="bofengshuimen">波风水门</option>
						<option value="dashewan">大蛇丸</option>
						<option value="gangshou">纲手</option>
						<option value="自来也">自来也</option>
					</optgroup>
				</select>
			</td>
		</tr>
    </tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
	$('#sel_productTag').select2({
		placeholder: "请至少选择一个人名",
		tags:true,
		createTag:function (decorated, params) {
			return null;
		},
		width:'256px'
	});
	function formatState (state) {
		if (!state.id) { return state.text; }
		var $state = $(
		'<span>' + state.text + '</span>'
		);
		return $state;
	};
	$('#sel_recommender').select2({
		placeholder: "请选择一个人名",
		templateResult: formatState,
		width:'256px'
	});
});
</script>
</body>
</html>

效果图：