选定的选项在 HTML 中带有滚动条的多个下拉选择标签中消失答案

【问题标题】：Selected Options disappear in a multiple drop-down select tag with scroll bar in HTML选定的选项在 HTML 中带有滚动条的多个下拉选择标签中消失
【发布时间】：2017-06-29 20:57:20
【问题描述】：

我有以下多个下拉选择标签

.Something {
  overflow-x: scroll;
  width: 16%;
}

<select multiple size="5" class="Something">
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
</select>

所以每当我选择一个选项时，它右侧的文本就会消失。

这样

我的门户网站中有这样几个下拉菜单。我不希望选项文本消失。这可以使用 HTML 或 CSS 而不是编写自定义的 JavaScript 代码来完成吗？如果有怎么办？

【问题讨论】：

无需屏幕截图和小提琴，您可以在此处发布代码的运行版本。
@ScottMarcus：谢谢斯科特。我不知道。
是的，您可能有图片 - 它有助于显示问题。此外，JSFiddle 可能允许比这里的 sn-ps 更多的东西，也可以在 sn-p 中发布代码。 @ScottMarcus - 来吧
在这种情况下，JSFiddle 不会添加任何值，只需运行 sn-p 即可显示视觉效果。
如果您使用与 OP 相同的浏览器，它会显示视觉效果，因此图像是个好主意

标签： javascript html css

【解决方案1】：

不知道为什么会这样，我可以在 Chrome 中重现。

这似乎解决了它。在<option> 元素样式上设置float: left; min-width: 100%;。

float: left 破坏了<select> 中<option> 标记的默认块格式化上下文行为。 min-width: 100% 只是让它在美学上更令人愉悦，它确保即使是内容短于 <select> 宽度的 <option> 标签在选择时也会“完全突出显示”。

附：这修复了 Chrome 和 IE11 的问题，不会修复 IE10- 和 Firefox，因为它们根本不支持在 <select> 元素上水平滚动:)

.Something {
  overflow-x: scroll;
  width: 16%;
}

option {
  float: left;
  min-width: 100%;
}

<select multiple size="5" class="Something">
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
</select>

【讨论】：

不错的简单解决方案！选定的选项元素采用选择元素的宽度，因此会切断该宽度之外的任何内容。除非有办法知道单词的“宽度”，因为如果您将选项的宽度设置为至少其全长，您可以看到所有内容......这可能是最好的方法。
是的，我遇到了 Chrome 问题。我认为这也适用于所有其他选择标签。谢谢@Mathijs

【解决方案2】：

<select> 元素的水平滚动在 Edge/Chrome 中存在问题，在 Firefox 中完全不支持。

支持所有浏览器的解决方法是将其简单地包装在<div> 中，然后在其中应用一些CSS：

.Something {
  overflow-x: auto;
  overflow-y: auto;
  width: 20%;
  height: 100px;
}

.Something > select {
  overflow-y: hidden;
}

<div class="Something">
    <select multiple size="6">
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
    </select>
</div>

必须进行一些更改才能使其正常工作。您的<select> 的size 属性必须与选项的数量相匹配，并且您的<div> 必须具有设定的高度。

【讨论】：

谢谢@Santi 我不知道。