select二级联动（bootstrap-select）的问题

最近在做select下拉框二级联动的时候，出现一个很郁闷的问题，因为想要select样式，直接采用了bootstrap-select插件。

jsp页面如下

			<tr>
				<td><select class="selectpicker" onchange="selectApar()" id="selectSex">
						<option value="">选择学生性别</option>
						<option value="男">男生宿舍</option>
						<option value="女">女生宿舍</option>
				</select></td>
			</tr>
			<tr>
				<td><select class="selectpicker" id="aparSelect">
						<option value="">选择公寓</option>
				</select></td>
			</tr>

用完插件后的效果样式挺满意的

但是在实现二级联动的时候，无论如何二级select都不能成功出现option。想破了脑袋最初以为是异步的问题。逛了半个小时求助贴后发现是bootstrap-select的问题(人都傻了)

因为在使用插件后，需要用$('#aparSelect').selectpicker('refresh');这段话来重绘UI，附上链接

当然，在改变了上级select的同时也别忘了remove掉二级option哦

贴上完整代码:

//选择宿舍类型(男，女)实现二级联动
function selectApar() {
	// 选中性别
	var sex = $("#selectSex").val();
	$("#aparSelect").find("option:not(:first)").remove();
	$.ajax({
				url : "/gradPro/dorm/selectDormSex.action",
				async : false,
				cache : false,
				data : {
					"sex" : sex
				},
				success : function(data) {
					for ( var i in data) {
						var temp = data[i].apartmentName;
						$("#aparSelect").append(new Option(temp,temp));
						//插件原因 需重绘UI
						$('#aparSelect').selectpicker('refresh');
					}
				}
			})
}