selectpicker二级级联（单选与多选），下拉框选择联动

需求

最近碰到一个问题：两个下拉框，后一个下拉框的数据要根据前一个下拉框的数据动态变化，数据来源于主子表关系；又或者通俗的来说下拉框的动态级联，比如城市选北京，对应的是北京的地区，上海，对应的是上海的地区这种，只不过数据都是来源于动态数据（查数据库表得来的）。

展示效果

 

前提

界面需引入：

css

bootstrap.css

bootstrap-select.min.css

js

    jquery-1.11.3.min.js

    bootstrap.min.js

    bootstrap-select.min.js

页面代码

<select id="projectId" name="projectId" value="" class="selectpicker" data-width="245"></select>

<select id="subProjectId" name="subProjectId" value="" class="selectpicker" data-width="245" data-live-search="true"></select>

其中，在这里有必要解释一下：

data-live-search="true"的意思是打开下拉框检索功能，（根据需求打不打开）效果如下：

 

下面是js代码

/** 下拉框的二级联动*/
function linkageValue(){
    $("#projectId").change(function(){
	//如果是回显显示的页面，当再次出发第一个下拉框的时候，需要刷新subProjectId下拉框
	if(!firstSelect) $("#subProjectId").selectpicker('refresh'); 
	var projectId = $("#projectId").val();
    
    $("#subProjectId").val("").trigger("change");//清空
    var subProjectId = "";
    getSubProjectId(projectId,subProjectId);
    })
}
/**
 * 获取根据projectId查取到的subProjectId集合下拉框
 * @param projectId
 * @returns
 * 其中firstSelect是一个全局变量，主要是为了区别回显跟添加
 * var firstSelect = true; 
 */
function getSubProjectId(projectId,subProjectId){
	if(firstSelect) subProjectId = "";
        if(!projectId){
		$('select[name="subProjectId"]').html("");//清空重置
		$("#subProjectId").selectpicker('refresh');
		return;
	    }
	    $.ajax({
	        url: "xxxx/xx",
	        data:{'projectId':projectId},
	        success: function (data) {
                 //多选框处理
	            if($('select[name="subProjectId"]').data('selectpicker')){
	                $('#subProjectId').selectpicker('destroy').removeAttr("multiple");
	            }//清空多选（多选为selectpicker插件）
	            if(data.length>0){
	                data.forEach(function(element){
	                    $('select[name="subProjectId"]').append('<option value="'+element.id + '" >' + element.subName + '</option>');
	                });
	                 $('select[name="subProjectId"]').attr("multiple",true).val('').selectpicker({
	                    noneSelectedText: '--请选择--' //默认显示内容
	                });
	           }
            
            //单选框处理
          	if(data.length>0){
          		 var html = "<option value=''>--请选择--</option>";
          	     data.forEach(function(element){
          	        html += '<option value="'+element.id + '" >' + element.subName + '</option>';
          	     });
          	     $("#subProjectId").html(html);
          	}else{
          	    $("#subProjectId").html("<option value=''>--暂无--</option>");
          	}
          $("#subProjectId").selectpicker('refresh');     //设置好内容后刷新，  多用于异步请求
          //回显
          if(subProjectId != null && subProjectId.length>0){
                    $("#subProjectId").selectpicker('val',subProjectId);        //如果需要同时设置显示指定的val
                }
          }
	    })
}

 

下面是回显方法需要调用

firstSelect = false; 

getSubProjectId(projectId,subProjectId); 
//保证在回显页面再次改动时也能触发 
linkageValue(); 
$('.selectpicker').selectpicker('refresh');

参考文献

selectpicker 使用简介附样例