如何正确获取 Selectric 插件中选中项的文本内容
你是否在使用 jQuery Selectric 插件美化下拉框时，尝试用 $('.selected').text() 获取当前选中文本，却只得到一个空字符串？这并非代码错误，关键在于代码执行的时机不对。
Selectric 是一款强大的下拉框美化插件，其核心原理是将原生 元素替换为自定义的、更美观的 DOM 结构。我们看到的高亮选项通常带有 class="selected" 类名。但问题在于，这套新界面的生成是异步的。插件需要时间来完成构建和渲染，如果你的 JavaScript 代码执行过早，在界面尚未绘制完成时就尝试读取，自然无法获取到任何内容。
因此，下面这种写法几乎总会失败：
const option = $('.selected').text(); // ❌ 风险：DOM 可能未准备就绪
console.log(option); // 输出: ""
✅ 正确方法：确保 DOM 与插件完全就绪
那么，如何安全地获取到我们需要的文本呢？核心策略只有一个：等待。等待所有必要的元素和状态准备就绪。以下是几种经过实践验证的有效方案。
方案一：使用 window.load 事件（基础且可靠）
这是最稳妥的方法之一。监听 window 对象的 load 事件，可以确保页面所有资源（包括脚本、CSS 和图片）都已加载完成。此时，Selectric 插件的初始化工作必然已经结束。
window.addEventListener('load', function() {
const selectedText = $('.selected').text().trim();
console.log(selectedText); // ✅ 成功输出: "Grid"
});
⚠️ 注意：
load事件的触发时机相对较晚，因为它需要等待所有外部资源。如果页面资源较多，用户可能会感知到轻微延迟。若仅需 DOM 结构就绪，可考虑使用DOMContentLoaded事件，但务必确认 Selectric 插件的初始化代码在此之前已执行完毕。
方案二：在 Selectric 初始化回调中获取（推荐做法）
更精准、更优雅的方式是利用 Selectric 插件自身提供的生命周期钩子。插件在完成初始化后，会触发 onInit 回调函数。在此回调内执行查询逻辑，是万无一失的。
$('select').selectric({
onInit: function() {
const selectedText = $('.selectric .selected').text().trim();
console.log('初始化后获取:', selectedText); // ✅ 安全可靠
}
});
? 提示：此处使用了更精确的选择器
.selectric .selected。由于.selected是一个通用类名，将其限定在.selectric容器内，可以有效避免误选页面中其他无关元素。
方案三：监听 Selectric 选项变更事件（实现动态响应）
前两种方案解决了初始化时的获取问题。但如果用户后续操作下拉框，切换了选中项呢？这就需要我们监听变更事件。最兼容的做法是直接监听原生 select 元素的 change 事件。
$('select').on('change', function() {
console.log('当前选中值:', $(this).val()); // 获取 value 属性值
console.log('当前显示文本:', $(this).find('option:selected').text()); // 获取 option 的文本
});
? 问题排查与验证建议
如果按照上述方法操作后仍未成功，建议按以下步骤进行排查：
- 验证插件加载：在浏览器开发者工具的控制台中输入
typeof $.fn.selectric，若返回"function"，则表明插件已正确加载。 - 检查 DOM 结构：使用开发者工具的 Elements 面板，检查带有
.selected类的元素是否确实存在于.selectric-scroll ul结构之下。 - 优化选择器精度：如前所述，
.selected类名过于通用。建议使用具有层级关系的选择器，例如$('.selectric-scroll .selected')，以精准定位目标元素。
✅ 核心总结
总而言之，无法获取文本的根本原因通常并非 jQuery 语法错误，而是代码执行时机不当。Selectric 动态生成的 UI 需要时间渲染，我们必须耐心等待其发出“就绪”信号。在几种方案中，优先推荐使用插件的 onInit 回调函数，它在性能和可靠性之间取得了最佳平衡。对于简单场景，window.load 也是一种有效的备选方案。请务必牢记：永远不要在 DOM 加载完成前，或插件初始化完成前，强行查询那些由插件动态生成的元素。
