使用jQuery无法获取selected类元素文本？求解决方案

为什么返回空字符串？ #

主要有两个常见原因：

• 代码执行时机不对：你的代码在Selectric插件完成初始化、生成模拟DOM结构之前就运行了，此时带.selected类的<li>还没被创建，$('.selected')要么选中了页面上其他无文本的元素，要么根本没匹配到元素，自然返回空字符串。
• 直接操作模拟DOM不可靠：Selectric会生成替代原生<select>的模拟DOM，但插件可能通过CSS（比如text-indent: -9999px）将原生文本隐藏，转而用伪元素展示内容，导致text()获取不到真实文本。

获取选中文本的正确方法 #

优先使用Selectric官方提供的API，避免直接依赖模拟DOM结构（插件版本更新可能会改变DOM结构，导致代码失效）：

方法1：使用插件的getSelected方法 #

先确保已正确初始化Selectric：

$('select').selectric();

然后调用API获取选中项文本：

// 获取选中的原生<option>元素
const selectedOption = $('select').selectric('getSelected');
// 提取文本
const selectedText = selectedOption.text();
console.log(selectedText); // 输出: Grid

方法2：通过原生<select>获取 #

即使使用了Selectric，原生<select>仍然存在（只是被隐藏），可以直接操作它：

// 直接获取原生select中选中项的文本
const selectedText = $('select option:selected').text();
console.log(selectedText);

方法3：监听插件的change事件 #

如果需要在选中项变化时获取文本，可以监听事件：

$('select').on('change', function() {
  const selectedText = $(this).find('option:selected').text();
  console.log(selectedText);
});

（不推荐）直接操作模拟DOM的补救方案 #

如果一定要通过模拟DOM获取，必须确保代码在插件初始化完成后执行：

$(document).ready(function() {
  // 初始化插件
  $('select').selectric();
  // 等待插件渲染完成（用setTimeout确保DOM已更新）
  setTimeout(() => {
    const selectedText = $('.selectric-scroll .selected').text();
    console.log(selectedText);
  }, 100);
});

但这种方法依赖插件的DOM结构，后续插件更新可能导致代码失效，不建议使用。

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