Vue.js中Listbox数据绑定异常：硬编码正常，数据库绑定后选框为空

我之前也碰到过Chosen插件和动态数据绑定的类似坑，大概率是插件初始化时机不对导致的——硬编码选项时，页面DOM加载完成就有完整的select选项，Chosen能正常抓取并渲染；但从数据库异步拉取数据时，往往插件已经初始化完了，数据才刚渲染到DOM里，自然就出现空选择框，而调整浏览器大小会触发Chosen的重绘逻辑，所以偶尔能恢复。给你几个可行的解决方案：

• 确保在数据绑定完成后初始化Chosen
  不管你用ajax、后端模板渲染还是前端框架，一定要等所有option都被添加到select里之后，再调用Chosen的初始化方法。举个jQuery ajax的例子：

  // 异步获取数据库数据
  $.ajax({
    url: '/your-data-api',
    method: 'GET',
    success: function(shiftData) {
      const $select = $('.chosen-select');
      // 先清空原有选项（如果有的话）
      $select.empty();
      // 循环生成option并添加到select
      shiftData.forEach(shift => {
        $select.append(`<option value="${shift.id}">${shift.name}</option>`);
      });
      // 这里才初始化Chosen
      $select.chosen({
        placeholder_text_multiple: "Choose shifts...",
        width: "350px"
      });
    }
  });
  

  如果是用Vue/React这类框架，要在数据挂载到DOM的生命周期钩子（比如Vue的mounted、React的useEffect依赖数据变化）里执行初始化。

• 已提前初始化？手动触发Chosen更新
  要是你已经在页面加载时初始化了Chosen，之后才动态加载数据，那可以在数据绑定完成后触发Chosen的更新事件，让它重新读取select的DOM内容：

  // 数据渲染完成后执行这行代码
  $('.chosen-select').trigger('chosen:updated');
  

  这个方法会强制Chosen重新生成下拉框，适配新添加的选项。

• 检查DOM与资源加载顺序
  确保Chosen的JS文件是在jQuery之后加载的（因为Chosen依赖jQuery），如果是用原生JS加载插件，也要保证在DOM加载完成后再执行相关代码。另外，Chosen的CSS文件尽量放在页面头部加载，避免样式未就绪导致的显示异常。

总结一下：Chosen是基于初始DOM结构生成自定义下拉框的，动态修改DOM后必须让它感知到变化——要么等数据渲染完再初始化，要么事后触发更新，这两个方案基本能解决你碰到的问题。

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