JQuery插件之select2
还在为单选框和复选框难看而头疼吗？JQuery插件selec2完美解决你的问题
先看看复选框的效果图：
单选框效果图：
看完效果就上代码：
第一步：我们需要导入bootstrap，JQuery，select相关的js和css，相关的资源我已经帮大家准备好了，在文章最后将该demo资源免费分享给大家
第二步：编写select代码并初始化
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>select2实例</title>
<link rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="select2-4.0.0/dist/css/select2.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="select2-4.0.0/dist/js/select2.min.js"></script>
</head>
<body>
<label class="control-label col-sm-1">个性标签（checkbox）: </label>
<div class="col-sm-3">
<select class="select_gallery-multiple" multiple="multiple" style="width:100%;">
<optgroup label="这样真的好么？">
<option value="0">打野</option>
<option value="01">上单</option>
<option value="02">中单</option>
<option value="03">送人头</option>
</optgroup>
<optgroup label="职位">
<option value="1">土豪</option>
<option value="2">屌丝</option>
<option value="3">单身dog</option>
<option value="4">苹果粉</option>
<option value="5">苦逼程序员</option>
</optgroup>
</select>
</div>
<label class="control-label col-sm-1">个性标签（radio）: </label>
<div class="col-sm-3">
<select class="select_gallery" style="width:100%;">
<optgroup label="这样真的好么？">
<option value="0">打野</option>
<option value="01">上单</option>
<option value="02">中单</option>
<option value="03">送人头</option>
</optgroup>
<optgroup label="职位">
<option value="1">土豪</option>
<option value="2">屌丝</option>
<option value="3">单身dog</option>
<option value="4">苹果粉</option>
<option value="5">苦逼程序员</option>
</optgroup>
</select>
</div>
<script type="text/javascript">
$(".select_gallery-multiple").select2();
$(".select_gallery").select2();
</script>
</body>
</html>
这样就做好了，是不是很简单，如果不能满足你的需求，可以去官网学习： http://select2.github.io/examples.html
资源下载：http://download.csdn.net/detail/qq_19558705/9290851