最近在做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');
					}
				}
			})
}