如何在下拉选框选中选项追加Sort by:文本且不修改原选项

要实现选中值显示带前缀但原选项内容不变的效果，原生HTML无法直接完成，需要借助JavaScript动态修改选中选项的文本，同时保证下拉展开时选项显示原始内容。

完整实现代码 #

<select name="product" id="product" style="width: 300px">
  <option id="TLX">TLX</option>
  <option id="FLX">FLX</option>
  <option id="MLX">MLX</option>
</select>

<script>
const select = document.getElementById('product');
// 预先保存所有选项的原始文本内容
const originalTexts = Array.from(select.options).map(opt => opt.textContent);

// 更新选中项显示文本的函数
function updateDisplay() {
  // 先恢复所有选项的原始文本，确保下拉时显示正常
  select.options.forEach((opt, index) => {
    opt.textContent = originalTexts[index];
  });
  // 给当前选中的选项添加前缀
  const selectedIdx = select.selectedIndex;
  if (selectedIdx !== -1) {
    select.options[selectedIdx].textContent = `Sort by: ${originalTexts[selectedIdx]}`;
  }
}

// 页面加载时初始化默认选中项的显示
updateDisplay();

// 监听选中变化事件，实时更新显示
select.addEventListener('change', updateDisplay);

// 监听下拉展开事件，恢复所有选项的原始文本
select.addEventListener('mousedown', () => {
  select.options.forEach((opt, index) => {
    opt.textContent = originalTexts[index];
  });
});
</script>

效果说明 #

• 页面加载完成后，默认选中的选项会自动显示为Sort by: XXX格式
• 用户切换选中项时，显示内容会同步更新为带前缀的文本
• 点击下拉展开选框时，所有选项会恢复为原始的TLX/FLX/MLX文本，不会出现前缀

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