下拉框組件bootstrap-select的使用---实现级联菜单

下拉框組件bootstrap-select的使用

传送门：bootstrap-select组件的官网地址

1. 快速使用的注意

1. 引入从官网下载的js和css。切记需要引用bootstrap的js和css。
2. 在引入css和js后，此时还不会显示bootstrap-select的样式。
   需要初始化select：记住放在页面的最下面。
   我在使用中就遇到了这个坑。

$(function () {
    $('select').selectpicker();
});

2. 实现级联菜单

1）、bootstrap-select实现的html

<div class="col-md-3 col-sm-3">
	<select class="selectpicker" title="学校" id="college"
					onchange="initDepart()">
	</select>
</div>
<div class="col-md-3 col-sm-3">
	<select class="selectpicker" title="部门" id="depart">
	</select>
</div>
			
<div class="col-md-2 col-sm-2">
	<button id="search_btn" class="btn btn-success">
		<span>查询</span>
	</button>
</div>

2）、js实现

/* 动态生成college的select选项--在初始化该页面时就加载该方法 */
	function initCollege() {
		var selectObj = $("#college");
		$.ajax({
			url : "PCCollegeHandler/listCollege_v1",
			type : "GET",
			success : function(response) {
				if (response.result == "success") {
					var configs = response.data;
					for ( var i in configs) {
						var config = configs[i];
						var optionValue = config.collegeNum;
						var optionText = config.collegeName;
						selectObj.append(new Option(optionText, optionValue));
					}
					// 刷新select
					selectObj.selectpicker('refresh');
				} else {
					console.log(response.msg);
				}
			},
			error : function() {
				console.log("服务器请求失败");
			}

		})
	}

	/* 根据选择学校动态生成部门下拉框 */
	function initDepart() {
		// 清空部门下拉框
		$("#depart").find("option:not(:first)").remove();
		$("#depart").selectpicker('refresh');
		// 重新获取部门下拉框数据 --- 根据选择的学校
		var collegeSelect = $("#college").val();
		var selectObj = $("#depart");
		var data = {
			collegeNum : collegeSelect
		}
		$.ajax({
			url : "PCDepartInfoHandler/listDepart_v1",
			type : "GET",
			dataType : "json",
			data : data,
			success : function(response) {
				if (response.result == "success") {
					var configs = response.data;
					for ( var i in configs) {
						var config = configs[i];
						var optionValue = config.departNum;
						var optionText = config.departName;
						selectObj.append(new Option(optionText, optionValue));
					}
					// 刷新select
					selectObj.selectpicker('refresh');
				} else {
					console.log(response.msg);
				}
			},
			error : function() {
				console.log("服务器请求失败");
			}

		})
	}
/* 加载页面时初始化加载 --该方法必须写在页面的最下面，
否则可能bootstrap-select的css样式加载不出来*/
	$(function(){
 	 	initCollege();
  		// 初始化 下拉框组件 ,必须在第一次加载页面时执行
		$('select').selectpicker();
	}）

3）、实现效果