Question

我想要在＆lt; select＆gt;中显示的文字与所选的＆lt; option＆gt;的文本不同。我的宽度有限，所以如果我在＆lt; option＆gt;中显示所有文本，那么一些文本会被切断。例如，如果我的标记是这样的：＆LT;选择＆GT; ＆lt; option＆gt;打开（某些说明）＆lt; / option＆gt; ＆lt; option＆gt;已关闭（一堆文字＆lt; / option＆gt; ＆LT; /选择＆GT; 选择第一个选项后，我只想显示“打开”一词以节省空间。我不能只使用Javascript替换文本，因为如果用户打开选择，那么他们将看到缩短的文本。有没有办法使用＆lt; select＆gt;执行此操作标签（即不使用自定义选择器）？

Answer 1

使用JS，您可以添加mining和focus事件侦听器来修改blur的文本：

＆＃13;

option

＆＃13;

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);
});

＆＃13;

Answer 2

您可以创建第二个select元素，该元素具有缩写选项。默认情况下显示它并使用未缩写的选项隐藏select元素。

当缩位select悬停时，显示另一个select元素。

更改选项时，请将缩写的select元素selectedIndex设置为匹配，这样可使两个元素保持同步：

＆＃13;

document.getElementById('s2').addEventListener('input', function() {
  document.getElementById('s1').selectedIndex= this.selectedIndex;
});

＆＃13;

#s1 {
  position: absolute;
}

#s2 {
  display: none;
}

#s2:hover, #s1:hover + select {
  position: relative;
  display: inline;
}

＆＃13;

<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>

＆＃13;

Answer 3

没有javascript和尝试节省空间的最佳方式是：

＆＃13;

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

＆＃13;

一旦鼠标悬停在选项

上，

title将显示为工具提示

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

Answer 4

您可以尝试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>

为`<select>`显示所选选项的不同文本

4 个答案: