selectpicker 动态加载数据

最新推荐文章于 2025-06-04 09:09:49 发布

原创最新推荐文章于 2025-06-04 09:09:49 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#二级联动动态加载数据 #下拉菜单

jQuery 专栏收录该内容

2 篇文章

订阅专栏

在构建二级联动下拉菜单时，遇到selectpicker美化后的动态数据加载问题。通过引入Bootstrap相关文件并添加class='selectpicker'，在AJAX请求后发现下拉列表无法显示新加载的选项。解决方案是在数据请求成功后，使用特定代码更新selectpicker，从而成功解决动态加载问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做二级下拉菜单动的时候，一般需要动态的给第二个下拉菜单赋值（有时候第一个下拉菜单也是动态加载数据），一般的下拉框的样式比较丑，当使用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');