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

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

jsp页面如下

1. <tr>

2. <td><select class="selectpicker" οnchange="selectApar()" id="selectSex">

3. <option value="">选择学生性别</option>

4. <option value="男">男生宿舍</option>

5. <option value="女">女生宿舍</option>

6. </select></td>

7. </tr>

8. <tr>

9. <td><select class="selectpicker" id="aparSelect">

10. <option value="">选择公寓</option>

11. </select></td>

12. </tr>

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

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

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

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

贴上完整代码:

1. //选择宿舍类型(男，女)实现二级联动

2. function selectApar() {

3. // 选中性别

4. var sex = $("#selectSex").val();

5. $("#aparSelect").find("option:not(:first)").remove();

6. $.ajax({

7. url : "/gradPro/dorm/selectDormSex.action",

8. async : false,

9. cache : false,

10. data : {

11. "sex" : sex

12. },

13. success : function(data) {

14. for ( var i in data) {

15. var temp = data[i].apartmentName;

16. $("#aparSelect").append(new Option(temp,temp));

17. //插件原因 需重绘UI

18. $('#aparSelect').selectpicker('refresh');

19. }

20. }

21. })

22. }