Preline.js 动态添加单选选项的解决方案

Preline.js 是一个现代化的 UI 组件库，提供了丰富的交互组件。其中 HSSelect 组件是一个功能强大的下拉选择器，但在动态添加选项时可能会遇到一些问题。

问题现象

在使用 HSSelect 组件时，开发者尝试通过 addOption 方法动态添加选项到单选选择器中，却遇到了 JavaScript 错误："Cannot set properties of undefined (setting 'selected')"。有趣的是，当选择器设置为多选模式（添加 multiple 属性）时，问题就消失了。

原因分析

这个错误通常发生在以下情况：

1. 尝试在未正确初始化的 HSSelect 实例上调用方法
2. 单选模式下，组件内部尝试设置选中状态时找不到预期的 DOM 元素
3. 组件实例化时可能没有传递必要的参数

解决方案

正确的实现方式应该包含以下几个关键点：

1. 确保组件正确初始化：在获取 HSSelect 实例时，第二个参数传递 true 表示强制创建新实例
2. 使用正确的 API 调用方式：通过 element 属性访问核心方法
3. 完整的 DOM 结构：确保选择器有完整的 HTML 结构和必要的 data 属性

完整示例代码

<div id="select-container">
  <!-- 选择器元素，注意 data-hs-select 属性 -->
  <select data-hs-select='{
    "placeholder": "请选择...",
    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500",
    "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto",
    "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100"
  }' class="hidden">
  </select>
</div>

<script>
  // 页面加载完成后初始化
  window.addEventListener('load', () => {
    // 获取 HSSelect 实例，第二个参数 true 表示强制创建新实例
    const select = window.HSSelect.getInstance(
      "#select-container [data-hs-select]", 
      true
    );
    
    // 通过 element 属性添加新选项
    select.element.addOption({
      title: "示例选项",
      val: "example-value",
    });
  });
</script>

最佳实践建议

1. 初始化时机：确保在 DOM 完全加载后再初始化组件，可以使用 window.addEventListener('load') 或 DOMContentLoaded 事件
2. 实例管理：如果需要频繁操作组件，建议将实例保存在变量中以便复用
3. 错误处理：添加适当的错误处理逻辑，防止未初始化时调用方法
4. 性能考虑：批量添加多个选项时，考虑使用文档片段(DocumentFragment)优化性能

通过遵循这些指导原则，开发者可以避免常见的初始化问题，并充分利用 HSSelect 组件的动态功能。