select2多选使用，与bootstrap table联动

 

效果图如下，当选择select中的值时，bootstraptable中自动添加数据。

实现思路

1.给select控件添加change事件。

$('#你的select的ID').change(function(){
    /*需要先清除上一次table的数据，因为select每一次选择都会触发该方法，如果不清除那么之前选择的数据还是会在table中显示，进行清楚那么每一次，table的数据都会和select中选择的数据匹配。*/
    $("#你的table的ID").bootstrapTable('removeAll');
	var selectedContent = $("#你的table的ID").bootstrapTable('getSelections');
	$('#你的table的ID').bootstrapTable('refreshOptions',{data:selectedContent});
    
	var o=document.getElementById('你的select的ID').getElementsByTagName('option');
	var all="";
	//console.log(o[1]);
	//获取select选中的值
	for(var i=0;i<o.length;i++){
		if(o[i].selected){
			all+=o[i].value+",";
			//通过选择给bootstraptable赋值
			showTable(o[i].value);
		}

	}
})

2.当选择option的时候拿到选中的值，去数据库查找相应的数据，然后向table添加数据

//向bootstrap添加数据，通过企业ID查询数据，添加到table中进行显示
function showTable(qyId) {
	ajax:{
		url : context + "/xxx/findEntityById?id="+qyId,
		data : {
		},
		success : function(data) {
			console.log(data)
            //向table添加数据
			$("#qydataTable").bootstrapTable('append',data);
		}
	};
}