为' <select> ' s的选定选项显示不同的文本

Show a different text for the selected option for `<select>`s

本文关键字：显示 选项 文本 select      更新时间：2023-09-26

我希望<select>中显示的文本与所选<option>的文本不同。我的宽度有限，所以如果我在<option>中显示所有文本，那么一些文本将被截断。

例如，如果我的标记是:

<select>
  <option>Open (some description)</option>
  <option>Closed (a bunch of text</option>
</select>

当第一个选项被选中时，我想只显示单词"打开"以节省空间。我不能只使用Javascript来替换文本，因为如果用户打开select，他们就会看到缩短的文本。

是否有办法做到这一点使用<select>标签(即不使用自定义选择器)?

使用JS，您可以添加focus和blur事件侦听器，它们可以修改option s的文本:

function focus() {
  [].forEach.call(this.options, function(o) {
    o.textContent = o.getAttribute('value') + ' (' + o.getAttribute('data-descr') + ')';
  });
}
function blur() {
  [].forEach.call(this.options, function(o) {
    console.log(o);
    o.textContent = o.getAttribute('value');
  });
}
[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
  s.addEventListener('focus', focus);
  s.addEventListener('blur', blur);
  blur.call(s);
});
<select class="shortened-select">
  <option value="Open" data-descr="some description"></option>
  <option value="Closed" data-descr="a bunch of text"></option>
</select>

您可以创建第二个select元素，它具有缩写选项。在默认情况下显示它，并隐藏select元素与非缩写选项。

当缩略的select悬停时，显示另一个select元素

当你改变一个选项时，将缩写的select元素的selectedIndex设置为匹配，这将使两个元素保持同步:

document.getElementById('s2').addEventListener('input', function() {
  document.getElementById('s1').selectedIndex= this.selectedIndex;
});
#s1 {
  position: absolute;
}
#s2 {
  display: none;
}
#s2:hover, #s1:hover + select {
  position: relative;
  display: inline;
}
<select id="s1">
  <option>Open</option>
  <option>Closed</option>
</select>
<select id="s2">
  <option>Open (some description)</option>
  <option>Closed (a bunch of text</option>
</select>

不使用javascript的最佳方法是:

<select size="5">
  <option title="(some description)">Open</option>
  <option title="(a bunch of text)">Closed</option>
</select>

当鼠标悬停在 选项上时，

title将显示为工具提示。

小提琴:http://jsfiddle.net/1ywv0uab/

你可以试试CSS伪元素。因为它们只是样式，它们不影响select的值，所以当select关闭时，插入的文本将不会显示。

option:after {
  content: ' (' attr(data-descr) ')';
}
<select>
  <option data-descr="some description">Open</option>
  <option data-descr="a bunch of text">Closed</option>
</select>

如果你想让select缩小到短文本的宽度，你只能在:focus显示伪元素。

select:focus > option:after {
  content: ' (' attr(data-descr) ')';
}
<select>
  <option data-descr="some description">Open</option>
  <option data-descr="a bunch of text">Closed</option>
</select>

相关文章：