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);
		}
	};
}