該功能基於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>
效果展示
