如何在Ajax控制的slim-select中加载并选中初始值

实现方案 #

这是slim-select的既定设计：初始化时如果检测到原生select下已有option节点，会默认关闭远程搜索的动态加载逻辑，仅使用已有选项。按照以下步骤即可同时满足默认选中和Ajax搜索需求：

步骤1：初始化时预留空选项保证Ajax功能正常 #

原生select标签不要预置任何option节点，初始化SlimSelect时不传入初始options，保证远程搜索逻辑正常加载。

步骤2：实例初始化完成后手动注入默认选中值 #

在SlimSelect实例创建完成后，调用官方API手动添加默认位置选项并设置为选中状态。

代码示例（Rails场景适配） #

首先在你的视图文件中，给select标签附加默认位置的data属性，方便JS读取：

<%# app/views/xxx/xxx.html.erb %>
<%= select_tag :location_id, "", 
  id: "location-select",
  data: { default_location: @user.last_saved_location.to_json } 
%>

然后写对应的JS初始化逻辑：

document.addEventListener('turbo:load', () => {
  const selectEl = document.querySelector('#location-select')
  if (!selectEl) return

  // 读取后端传入的默认位置数据
  const defaultLoc = JSON.parse(selectEl.dataset.defaultLocation || '{}')
  if (!defaultLoc.id) return

  // 初始化SlimSelect，仅配置Ajax逻辑，不传入初始选项
  const locationSelect = new SlimSelect({
    select: selectEl,
    placeholder: '选择位置',
    ajax: (searchText, callback) => {
      // 你的原有Ajax搜索逻辑
      fetch(`/locations/search?q=${encodeURIComponent(searchText)}`, {
        headers: { 'Accept': 'application/json' }
      })
      .then(res => res.json())
      .then(locations => {
        const options = locations.map(loc => ({
          text: loc.full_name,
          value: loc.id.toString()
        }))
        callback(options)
      })
    }
  })

  // 注入默认选项并设置为选中
  locationSelect.setData([{
    text: defaultLoc.name,
    value: defaultLoc.id.toString(),
    selected: true
  }])
})

注意事项 #

• 如果不希望默认选项在用户未搜索时一直保留，可以在Ajax请求的callback执行前调用locationSelect.setData([])清空历史选项，避免默认值和搜索结果同时展示。
• 若使用的是Rails 6及以上的Turbo架构，需要额外监听turbo:render事件，避免页面局部刷新后SlimSelect重复初始化或失效。
• 默认值的value类型要和后续Ajax返回的选项value类型保持一致（比如统一转成字符串），避免setSelected方法识别失败。

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