bootstrap multiselect 自动勾选
温凯
bootstrap multiselect 自动勾选
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-multiselect.css">
<script type="text/javascript" src="bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//单选
$('#example-getting-started').multiselect();
//多选
$('#example-single').multiselect();
//分组
$('#example-multiple-optgroups').multiselect({
//enableClickableOptGroups: true,//控制分组
includeSelectAllOption: true,//控制全选
//enableCollapsibleOptGroups: true,//控制分组折叠
enableFiltering: true,//控制过滤
//disableIfEmpty :true, //没有选项的时候就会禁用 disabled="disabled"的时候也起作用
//disabledText :'已禁用...' ,
//buttonWidth: '400px',
//dropRight: true,//下拉框在右侧
//dropUp: true,//下拉框在上边
maxHeight: 400,//下拉框最大高度
buttonClass: 'btn btn-link',
selectAllNumber:true,//显示选中几项
enableFullValueFiltering:false,
//selectAllJustVisible:false,//不可见的也全选中
onDropdownShown: function(event) {//显示下拉菜单的回调
this.$select.parent().find("input[type='text'].multiselect-search").keyup(function(){
//console.log($(this).parent().parent().parent().find("input[value='multiselect-all']"));
$('#example-multiple-optgroups').multiselect('deselectAll', false);
var target = $(this);
var funForSettimeout = function(){
console.log(target.val());
if (target.val() != "") {
console.log('打钩');
$('#example-multiple-optgroups').multiselect('selectAll', true);
$('#example-multiple-optgroups').multiselect('updateButtonText');
}else{
$('#example-multiple-optgroups').multiselect('deselectAll', false);
$('#example-multiple-optgroups').multiselect('updateButtonText');
}
};
setTimeout(funForSettimeout, 300);
});
},
// onDropdownHide: function(event) {//隐藏下拉菜单的回调
// alert('Dropdown closed.');
// },
});
});
</script>
</head>
<body>
<!-- Build your select: -->
<select id="example-getting-started">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<br/>
<select id="example-single" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<br/>
<select id="example-multiple-optgroups" multiple="multiple">
<!-- <optgroup label="Group 1"> -->
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
<!-- </optgroup>
<optgroup label="Group 2"> -->
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
<!-- </optgroup> -->
<!-- <optgroup label="Group 3"> -->
<option value="3-1">Option 3.1</option>
<option value="3-2">Option 3.2</option>
<option value="3-3">Option 3.3</option>
<!-- </optgroup> -->
<!-- <optgroup label="Group 4"> -->
<option value="4-1">Option 4.1</option>
<option value="4-2">Option 4.2</option>
<option value="4-3">Option 4.3</option>
<!-- </optgroup> -->
</select>
</body>
</html>
bootstrap-multiselect.css 和 bootstrap-multiselect.js的下载地址如下
https://github.com/davidstutz/bootstrap-multiselect
希望对大家有帮助
类似资料：