bootstrap multiselect 自动勾选

最新推荐文章于 2022-08-24 18:44:36 发布

趙小欠儿_10

最新推荐文章于 2022-08-24 18:44:36 发布

阅读量455

点赞数 2

文章标签： javascript css html jquery

本文链接：https://blog.csdn.net/weixin_42809317/article/details/103649963

版权

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>