如何为Bootstrap-select通过Ajax加载默认选中值

问题概述 #

使用Ajax-Bootstrap-Select插件实现多选下拉框，已完成Ajax搜索数据和多选功能，但编辑页面加载时，无法通过已有ID列表加载对应标签并设置默认选中。

解决方案 #

要实现编辑页默认选中，需要先获取已有ID对应的选项数据，再初始化插件并刷新显示。以下是具体步骤：

1. 新增后端接口获取指定ID的选项数据 #

在现有getApps接口基础上，新增一个接口（比如getAppsByIds），接收ID列表参数，返回对应ID的选项数据（结构需包含id和label字段，与getApps接口返回格式一致）。

2. 页面加载时先拉取默认数据并初始化插件 #

在初始化插件前，先调用新接口获取默认ID对应的选项，插入到<select>中并标记为选中，再初始化插件并刷新显示。

修改后的JavaScript代码如下：

// 从数据库获取的默认ID列表，替换为实际数据
var defaultIds = [1, 3, 5]; 

// 请求默认ID对应的选项数据
$.ajax({
    url: 'ajaxhandle?action=getAppsByIds',
    type: 'GET',
    dataType: 'json',
    data: { 
        ids: defaultIds.join(',') // 将ID数组转为逗号分隔字符串传递给后端
    },
    success: function(data) {
        var $select = $('#u-list');
        
        // 插入选中的选项
        data.forEach(function(item) {
            $select.append(`<option value="${item.id}" selected>${item.label}</option>`);
        });

        // 插件配置（保持原有配置不变）
        var listConfig = {
            ajax          : {
                url     : 'ajaxhandle?action=getApps',
                type    : 'GET',
                dataType: 'json',
                data    : {
                    term: '{{{q}}}'
                }
            },
            locale        : {
                emptyTitle: 'Select and Begin Typing'
            },
            log           : 3,
            preprocessData: function (data) {
                var i, l = data.length, array = [];
                if (l) {
                    for (i = 0; i < l; i++) {
                        array.push($.extend(true, data[i], {
                            text : data[i].label,
                            value: data[i].id,
                            data : {
                                subtext: data[i].label
                            }
                        }));
                    }
                }
                return array;
            }
        };

        // 初始化插件并刷新显示
        $('.selectpicker').selectpicker().filter('.with-ajax').ajaxSelectPicker(listConfig);
        $select.selectpicker('refresh');
    }
});

3. 后端接口处理示例（伪代码） #

以PHP为例，getAppsByIds接口的处理逻辑：

if ($_GET['action'] === 'getAppsByIds') {
    $ids = explode(',', $_GET['ids']);
    // 过滤非法ID，防止SQL注入
    $safeIds = array_map('intval', $ids);
    // 查询数据库获取对应数据
    $data = $db->query("SELECT id, label FROM apps WHERE id IN (" . implode(',', $safeIds) . ")")->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($data);
    exit;
}

补充说明 #

• 如果不想新增接口，也可以在插件初始化后，使用$select.ajaxSelectPicker('addOption', options)方法逐个添加选项并设置选中，但这种方式需要多次请求或提前知道标签内容，效率低于新增接口的方式。
• 确保后端返回的数据格式与preprocessData处理的格式一致，避免插件渲染异常。

内容的提问来源于stack exchange，提问作者user881703