TomSelect远程加载选项时如何正确预填已选项并隐藏静态选项

核心思路 #

利用PHP输出已分配人员的ID和名称到前端，在TomSelect初始化时添加这些人员作为选中项，但通过自定义渲染逻辑让它们不显示在下拉列表中，同时保留原有的动态fetch加载逻辑，确保下拉列表仅在用户搜索或fetch完成后才显示选项。

具体实现步骤 #

1. PHP端输出初始数据

先通过$site->getPersons()获取已分配人员，转换成JSON格式传递给前端：

<?php
// 获取已分配人员
$assignedPersons = $site->getPersons();
$initialOptions = [];
$initialValues = [];

foreach ($assignedPersons as $person) {
    $initialOptions[] = [
        'value' => $person->getId(),
        'text' => $person->getCompletename(),
        'initial' => true // 标记为初始选项，用于后续过滤
    ];
    $initialValues[] = $person->getId();
}

// 转义后输出到页面，避免XSS
$initialOptionsJson = htmlspecialchars(json_encode($initialOptions));
$initialValuesJson = htmlspecialchars(json_encode($initialValues));
?>

<!-- 用隐藏存储初始数据 -->
<input type="hidden" id="initial-persons" value="<?= $initialOptionsJson ?>">
<input type="hidden" id="initial-values" value="<?= $initialValuesJson ?>">

<!-- 你的多选下拉框，不要添加任何<option>标签 -->
<select id="site-persons" multiple></select>

2. JavaScript初始化TomSelect

初始化时添加初始选项并设置选中，同时通过渲染逻辑过滤初始选项，确保下拉列表初始为空：

document.addEventListener('DOMContentLoaded', function() {
    // 读取初始数据
    const initialOptions = JSON.parse(document.getElementById('initial-persons').value);
    const initialValues = JSON.parse(document.getElementById('initial-values').value);

    // 初始化TomSelect
    const tomSelect = new TomSelect('#site-persons', {
        multiple: true,
        valueField: 'value',
        labelField: 'text',
        searchField: 'text',
        // 保留你原有的动态加载逻辑
        load: function(query, callback) {
            fetch(`/your-api-endpoint?query=${encodeURIComponent(query)}`)
                .then(res => res.json())
                .then(data => {
                    callback(data);
                    // 首次加载完成后，移除初始选项（可选，避免后续冲突）
                    initialOptions.forEach(opt => tomSelect.removeOption(opt.value));
                })
                .catch(() => callback([]));
        },
        preload: false, // 禁止自动预加载选项
        // 自定义选项渲染逻辑：过滤初始选项，不显示在下拉列表
        render: {
            option: function(data, escape) {
                if (data.initial) return ''; // 跳过初始选项的渲染
                return `<div>${escape(data.text)}</div>`;
            }
        }
    });

    // 添加初始选项并设置选中
    initialOptions.forEach(opt => tomSelect.addOption(opt));
    tomSelect.addItem(initialValues);
});

为什么之前的方案有问题？ #

• 直接用items数组只能传ID，无法同步显示名称，因为TomSelect需要对应的选项数据才能渲染文本。
• 手动添加<option selected>或调用addOption后，这些选项会被TomSelect纳入下拉列表的默认选项池，即使取消选中也会一直显示，除非手动移除。

效果说明 #

• 页面加载后，已分配人员会正确显示在TomSelect的选中区域。
• 下拉列表初始为空，只有在用户输入搜索内容、触发fetch加载后才会显示匹配的选项。
• 首次fetch完成后，初始选项会被移除，避免后续操作中出现冗余选项。

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