selectpicker 动态加载数据

在做二级下拉菜单动的时候，一般需要动态的给第二个下拉菜单赋值（有时候第一个下拉菜单也是动态加载数据），一般的下拉框的样式比较丑，当使用selectpicker进行下拉菜单美化时，有可能导致下拉菜单加载不进来，这里对这个问题做一个完美解决。
1.一般的下拉框二级联动实现

<select id="parent">select>
<select id="childern1">select>
<script>
    $(function(){
     var parent=$('#parent');
     $.ajax({
       type:"POST",
       datatype:"json",
       url:'dataurl',
       success:function(data){
           parent.empty();
           parent.append("请选择");
           for(var i=0;i""+data[i].name+"");
           }
       }
     });
     $('#parent').change(function(){
           var children=$('#children');
           var id=$('#parent').val();
           var pid={"pid":id};
           $.ajax({
               type:"POST",
               datatype:"json",
               data:pid,
               url:'dataurl',
               success:function(datalist){
                   children.empty();
                   children.append("请选择");
                   for(var i=0;i""+datalist[i].name+"");
                   }
       }
     });
     });
    });
script>

2.为了美化下拉框，引入
bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js
以及bootstrap.min.js等几个常用的bootstarp文件
然后只要给select 加上 class=“selectpicker”；
这时再次用ajax 请求数据的时候，发现下拉列表加载不了option了，但是我们可以通过查看元素发现option确实在select标签下面，至此已经发现问题所在了，只能想办法解决了。在网上找了一圈没找到解决方案，最后在ajax成功请求数据之后，加上如下代码就完美解决啦。

parent.selectpicker('refresh');
children.selectpicker('refresh');