select2是一个非常好用的下拉框插件,支持很多功能。
官方文档,例子:http://select2.github.io/
现在记录一下我在工作中用到的下拉框多值选择。界面如下:
html定义:
首先引入css,js库
<link href="#springUrl("")/plugins/select2/select2.min.css" rel="stylesheet" type="text/css" />
<script src="#springUrl("")/plugins/select2/select2.min.js"></script>
在html中定义如下下拉框:
<select id="cluster" class="select2" multiple="multiple">
<option value="1">jiesi-1</option>
...
<option value="5">jiesi-8</option>
</select>
//注意,上面加上multiple="multiple"就可以让select支持多选,不加就是单选
//例子:http://select2.github.io/examples.html
初始化:
在js中加载的时候初始化select.
$("#cluster").select2();
如果需要,可以加一些事件函数:
$("#cluster").select2().on("select2:select",function(e){
getClusterNodes($(this).val(),null);
});
使用:
设置select选中某个值:
$("#cluster").val(3);//设置选中值
$("#cluster").trigger("change");//触发change事件,让界面上显示选中的值
设置select多值选中:
$("#cluster").val([2,3]).trigger("change");//设置多个值选中
设置select选中某个值,并且触发选中事件
$("#clusterSelect").val(selectedCluster.id).trigger("change").trigger("select2:select");
//获取select选中的值:
alert($("#cluster").val());//3,4,5 //输出选择的value,如果有多个值之间逗号分隔
var selected = $("#cluster").select2('data');//选择的值
for (var i=0;i<selected.length;i++) {
alert(selected[i].id + '->' + selected[i].text);//输出 2->jiesi-1
}
例子:multiSelectTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 测试</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div>
<h1>单选测试</h1>
<select id="single_select" style="width: 400px;">
<option value="a">a</option>
<option value="b">b</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
</select>
<button type="button" onClick="search1();">查询</button>
</div>
<div>
<h1>多选测试</h1>
<select id="multi_select" style="width: 400px;" multiple="multiple">
<option value="a">a</option>
<option value="b">b</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
</select>
<button type="button" onClick="search2();">查询</button>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#single_select").select2();
$("#multi_select").select2();
});
function search1() {
alert($("#single_select").val());
}
function search2() {
alert($("#multi_select").val());
}
</script>
</html>