该功能基于Bootstrap-select来实现
需要引入以下几个文件：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
代码实现
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select实现多选下拉框</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="form-group">
<div class="col-lg-6">
<select id="classname" class="selectpicker show-tick form-control" multiple>
<option value="0">黄成志</option>
<option value="1">张君浩</option>
<option value="2">马玉凯</option>
<option value="3">毕世杰</option>
<option value="4">张国栋</option>
<option value="5">汪玉龙</option>
<option value="6">孙慧鑫</option>
</select>
</div>
<button class="col-lg-1" onclick="getvalue()">获取值</button>
<button class="col-lg-1" onclick="indexs()">回显</button>
<button class="col-lg-1" onclick="selectall()">全选</button>
<button class="col-lg-1" onclick="delselectall()">全不选</button>
<button class="col-lg-1" onclick="backselect()">反选</button>
</div>
<script>
// 获取值
function getvalue() {
console.log($('#classname').val());
}
//回显
function indexs() {
var str = '1,3,5,6';
var arr = str.split(',');
$('#classname').selectpicker('val', arr);
}
//全选
function selectall() {
var select = document.getElementById("classname");
var options = select.options;
var arr = [];
for (var i = 0; i < options.length; i++){
arr.push(options[i].value);
}
$('#classname').selectpicker('val', arr);
}
//全不选
function delselectall(){
var arr = [];
$('#classname').selectpicker('val', arr);
}
//反选
function backselect() {
//获取选中值
var arrs = $('#classname').val();
var select = document.getElementById("classname");
var options = select.options;
var arr = [];
for (var i = 0; i < options.length; i++){
arr.push(options[i].value);
}
//如果选中的值为空，则直接全选
if (arrs===null){
$('#classname').selectpicker('val', arr);
}else{
var result_arr = getArrDifference(arrs,arr);
$('#classname').selectpicker('val', result_arr);
}
}
//求出两个数组不同的值
function getArrDifference(arr1, arr2) {
return arr1.concat(arr2).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
}
</script>
</body>
</html>
效果展示
扩展
默认的下拉框会有Nothing selected。
- 方法一：
在js中增加：
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText: '请选择患者' //默认显示内容
});
});
- 方法二：
直接给select标签增加 title属性。