BootstrapSelect实现加载默认选中

最新推荐文章于 2023-05-27 10:33:39 发布

EruruI

最新推荐文章于 2023-05-27 10:33:39 发布

阅读量3.5k

点赞数

分类专栏： JS 前端文章标签： js bootstrap

本文链接：https://blog.youkuaiyun.com/lsy1162526799/article/details/107657026

版权

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍如何在Bootstrap Select插件中默认选中特定ID的选项。通过在构建select内容后使用val()或selectpicker('val')方法设置默认选择项，避免了refresh方法导致的选择器失效问题。

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

默认选中的实现方式

比如有个Children数组，每个元素都具有id和name，将id作为value存入option选项中。
你想要默认选中id为特定值的选项。

var selectedId=666
 $.each(result.CHILDREN, function (i, item) {
 							if(item.ID=selectedId){
 							$(".selectpicker").append('<option selected value="' + item.ID + '">' + item.NAME+ '</option>');
 							}else{
                            $(".selectpicker").append('<option  value="' + item.ID + '">' + item.NAME+ '</option>');
                            }
                        });
$('.selectpicker').selectpicker('refresh');

但是refresh这种做法会使BootstrapSelect不生效。

那么就在构建select内容结束后再进行设置默认选择的操作。

var selectedId=666
 $.each(result.CHILDREN, function (i, item) {
                           $(".selectpicker").append('<option  value="' + item.ID + '">' + item.NAME+ '</option>');
                        });
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('val',selectedId)

或者

var selectedId=666
 $.each(result.CHILDREN, function (i, item) {
                           $(".selectpicker").append('<option  value="' + item.ID + '">' + item.NAME+ '</option>');
                        });
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').val(selectedId);
$('.selectpicker').selectpicker('render');