bootstrap-select动态级联多选下拉框

最新推荐文章于 2023-07-24 09:05:28 发布

LLL_LH

最新推荐文章于 2023-07-24 09:05:28 发布

阅读量1.4w

点赞数 2

分类专栏： bootstrap

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/82838455

版权

bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Ajax动态加载两个级联Select控件的选项。首先通过Ajax请求获取第一个Select的选项，然后监听其change事件，再次通过Ajax请求加载第二个Select的选项。特别注意在更新第二个Select后需要调用selectpicker('refresh')方法来刷新组件。

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

1、引用css/js

<link href="../../plugins/css/bootstrap.min.css" rel="stylesheet">
<link href="../../plugins/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="../../plugins/bootstrap-3.3.7-dist/js/plugins/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet">
<script src="../../plugins/js/jquery.min.js"></script>
<script src="../../plugins/js/bootstrap.min.js"></script>
<script src="../../plugins/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../plugins/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../../plugins/bootstrap-3.3.7-dist/js/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

2、html

<div class="form-group">
	<label class="col-sm-3 control-label">编码</label>
	<div class="col-sm-7">
		<select class="form-control selectpicker" id="addCom">
	    </select>
    </div>
</div>
<div class="form-group">
	<label class="col-sm-3 control-label">用户</label>
	<div class="col-sm-7">
		<select multiple id="addUsercode" class="selectpicker form-control">
		</select>
	</div>
</div>

3、js 通过ajax获取编码，通过选择编码加载用户，用户可以多选

$.ajax({
          method:"post",
          url: '/list',
          dataType : "jsonp",
          async:true,
          success:function (result) {
          	 var str='<option value="">--请选择--</option>';
             for (var i = 0; i < result.length; i++) {
               str+='<option value='+result[i].code+'>'+result[i].codename+'</option>';                     
            } 
            $("#addCom").html(str);      
          }
    });
    
    $("#addComcode").change(function(){
    	var code = $("#addCom").val();
    	$.ajax({
	          method:"post",
	          url: '/userList',
	          data:{
	          	code: code
	          },
	          success:function (res) {
	          	 var str="";
	             for (var i = 0; i < res.length; i++) {
	               str+='<option value="'+res[i].usercode+'">'+res[i].username+'</option>';
	            } 
	            $("#addUser").html(str);
	            $('#addUser').selectpicker('refresh');
	          }
	    });
    });

第一个select通过ajax获取数据，第二个select通过第一select的change事件加载数据

注意：$('#addUser').selectpicker('refresh');这一句必须加，不然第二个数据显示不出来