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("<option value=''>请选择</option>");
           for(var i=0;i<data.length;i++){
                parent.append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
           }
       }
     });
     $('#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("<option value=''>请选择</option>");
                   for(var i=0;i<datalist.length;i++){
                        children.append("<option value='"+datalist[i].id+"'>"+datalist[i].name+"</option>");
                   }
       		   }
     	});
    });
 });
</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');