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