如何正确得到 Selectric 插件中选中项的文本内容

使用 jQuery Selectric 插件时，直接调用 $('.selected').text() 返回空字符串，是因为 DOM 元素尚未渲染完成；需确保插件初始化完毕后再执行查询，推荐通过 window.addEventListener('load') 或 Selectric 提供的回调机制安全获取文本。

使用 jquery selectric 插件时，直接调用 `$('.selected').text()` 返回空字符串，是因为 dom 元素尚未渲染完成；需确保插件初始化完毕后再执行查询，推荐通过 `window.addeventlistener('load')` 或 selectric 提供的回调机制安全获取文本。

Selectric 是一个高度定制化的下拉选择增强插件，它会将原生 <select> 替换为自定义 DOM 结构（如 .selectric-scroll > ul > li），其中当前选中项通常带有 class="selected"。但该结构并非立即可用——它依赖于 Selectric 的初始化过程，而该过程是异步的，且可能滞后于脚本执行。

因此，以下代码极大概率返回空字符串：

const option = $('.selected').text(); // ❌ 危险：DOM 可能未就绪console.log(option); // 输出: ""

✅ 正确做法：等待 DOM 与插件就绪

方案一：监听 window.load（基础可靠）

适用于简单场景，确保所有资源（含 JS/CSS）加载完成后再执行：

window.addEventListener('load', function() {  const selectedText = $('.selected').text().trim();  console.log(selectedText); // ✅ 输出: "Grid"});

⚠️ 注意：load 事件触发较晚（等待图片、样式表等全部加载），若仅需 DOM 结构就绪，可改用 DOMContentLoaded，但需确保 Selectric 已初始化（见方案二）。

方案二：在 Selectric 初始化后获取（推荐）

Selectric 提供 init 回调，确保其 DOM 已生成且状态稳定：

$('select').selectric({  onInit: function() {    const selectedText = $('.selectric .selected').text().trim();    console.log('初始化后获取:', selectedText); // ✅ 安全可靠  }});

? 提示：.selectric .selected 使用更精确的选择器，避免意外匹配其他 .selected 元素。

方案三：监听 Selectric 状态变更（动态响应）

若需响应用户后续切换操作，应监听 change 事件（原生 select）或 selectric-open/selectric-close：

$('select').on('change', function() {  console.log('当前选中值:', $(this).val());           // 获取 value  console.log('当前显示文本:', $(this).find('option:selected').text()); // 获取 option 文本});

? 额外验证建议

• 检查 Selectric 是否已正确引入：控制台运行 typeof $.fn.selectric 应返回 "function"；
• 查看 DOM 结构：在开发者工具中确认 .selected 元素确实存在于 .selectric-scroll ul li 中；
• 避免全局污染：.selected 类名较通用，建议限定作用域，例如 $('.selectric-scroll .selected')。

✅ 总结

根本原因不是 jQuery 语法错误，而是执行时机不当。Selectric 构建的 UI 是动态注入的，必须在插件完成渲染后读取。优先采用 onInit 回调，兼顾性能与可靠性；若逻辑简单，window.load 亦可作为兜底方案。切勿在 DOM 加载前或插件初始化前硬性查询 .selected 元素。