使用select2实现多选select下拉框
<!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 type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/select2.min.css"/>
<script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/jquery-1.7.1.js"></script>
<script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/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>
ps：清空可用$("#sel_productTag").select2("val", ""); 方法，可参考http://download.csdn.net/detail/liu765023051/8827491javascript