选择框分组 bootstrap-multiselect_bootstrap-multiselect 分组-CSDN博客

本文链接：https://blog.csdn.net/qq_41115103/article/details/106910520

本文介绍了如何利用bootstrap-multiselect插件进行多选框和分组选择操作，包括插件的引用、多选框及分组选择的代码示例，并提到了下拉框的禁用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分组并进行选项的禁用和启用

1，使用的插件
2，多选框
3，分组选择

1，使用的插件

bootstrap-multiselect.css
bootstrap-multiselect.js
下载链接

2，多选框

在这里插入图片描述
代码如下：

	<!-- 引入js和css文件 -->
<link rel="stylesheet" href="${ctx}/static/bootstrap/dist/css/bootstrap-multiselect.css">
<script src="${ctx}/static/bootstrap/dist/js/bootstrap-multiselect.js"></script>
	<!-- 使用多选框-->
	<select id="example-getting-started" multiple="multiple">
			<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>

$(function(){
	//加载多选框
	$('#example-getting-started').multiselect();
}

3，分组选择

在这里插入图片描述
代码如下：

<!-- 引入js和css文件-->
<link rel="stylesheet" href="${ctx}/static/bootstrap/dist/css/bootstrap-multiselect.css">
<script src="${ctx}/static/bootstrap/dist/js/bootstrap-multiselect.js"></script>
<!-- 分组下拉框使用-->
<div class="list-input">
	<label class="test-a">录入状态：</label>
	<select name="condition" multiple="multiple" id="condition" >
		<optgroup label="未录入">
			<option value="1" >正考总成绩<60分</option>
			<option value="5" >正考缓考</option>
			<option value="6" >正考违纪</option>
		</optgroup>
		<optgroup label="已录入">
			<option value="0">已录入</option>
		</optgroup>
		<optgroup label="已发布">
			<option value="2">已发布</option>
		</optgroup>
	</select>
</div>

$(function(){
	$("#condition").multiselect();
})

4，下拉框禁用

在这里插入图片描述

代码：

<!-- 引入js和css文件-->
<link rel="stylesheet" href="${ctx}/static/bootstrap/dist/css/bootstrap-multiselect.css">
<script src="${ctx}/static/bootstrap/dist/js/bootstrap-multiselect.js"></script>
<!-- 分组下拉框使用-->
<div class="list-input">
	<label class="test-a">录入状态：</label>
	<select name="condition" multiple="multiple" id="condition" >
		<optgroup label="未录入">
			<option value="1" >正考总成绩<60分</option>
			<option value="5" >正考缓考</option>
			<option value="6" >正考违纪</option>
		</optgroup>
		<optgroup label="已录入">
			<option value="0">已录入</option>
		</optgroup>
		<optgroup label="已发布">
			<option value="2">已发布</option>
		</optgroup>
	</select>
</div>

$(function(){
	$("#condition").multiselect({
		buttonWidth:171,
		buttonHeight:30,
		maxHeight:220,
		onChange:function(){
    		console.log("onChange事件被触发");
    		 var im = $("#condition").val();
    		 if(im != null){
    			 //单个选中
    			 if (im.includes('1')||im.includes('5')||im.includes('6')) {
    			     $('#condition').find("option[value='0']").prop('disabled', true);
    			     $('#condition').find("option[value='2']").prop('disabled', true);
    		    }else if(im.includes('0')){ 
    			    $('#condition').find("option[value='1']").prop('disabled', true);
    			    $('#condition').find("option[value='5']").prop('disabled', true);
    			    $('#condition').find("option[value='6']").prop('disabled', true);
    			    $('#condition').find("option[value='2']").prop('disabled', true);
    			}else if(im.includes('2')){
    				 $('#condition').find("option[value='1']").prop('disabled', true);
    				 $('#condition').find("option[value='5']").prop('disabled', true);
    				 $('#condition').find("option[value='6']").prop('disabled', true);
    				 $('#condition').find("option[value='0']").prop('disabled', true);
    			}
    		 }else{
    			 //所有的选中
    			 $("#condition option").prop('disabled', false);
    		 }
    		 $("#condition").multiselect('refresh');
    	}
	});
})