使用Select2组件时，如何在Local Storage存储选项文本而非值？

安全阿岳

2026-5-7

解决方法：存储Select2选中项的文本到Local Storage

没问题，这个修改其实非常简单，只需要调整你获取选中项内容的方式就可以了～

核心修改点

你原来的代码中是获取选项的value属性（也就是this.value），现在我们只需要换成获取选项的文本内容即可。同时，我们还可以优化遍历逻辑，直接只遍历已经选中的选项，让代码更高效。

修改后的完整代码

// 监听下拉框的变化
$('#locations').change(function() {
  var selected = [];
  // 直接遍历所有已选中的选项，无需手动判断是否选中
  $('#locations option:selected').each(function() {
    // 获取选项的文本内容，trim()用来去除文本前后可能的空格
    selected.push(this.textContent.trim());
  });
  // 将选中的文本数组存入Local Storage
  localStorage.setItem('locations', JSON.stringify(selected));
});

针对Select2组件的优化（可选）

如果你是用Select2渲染的下拉框，有时候原生的change事件可能不够可靠，建议改用Select2提供的专属事件：

// 监听Select2的变化事件
$('#locations').on('select2:change', function() {
  var selected = [];
  $(this).find('option:selected').each(function() {
    selected.push(this.textContent.trim());
  });
  localStorage.setItem('locations', JSON.stringify(selected));
});