26

是否可以（仅使用 HTML）显示跨越多行的 s select？option

4

8 回答 8

17

无法使用 html 选择控件。

您可以使用一个 div，该 div 可以用作使用 JavaScript 和 css 的下拉列表。

于 2009-07-22T13:48:02.873 回答
5

这不仅在标准 html 上是不可能的，而且它（作为一个对象）会变得与 IOS 设备处理选项标签的方式不兼容，即显示一个滚动列表，所以想要选项标签是不合理的以这种方式行事，因为它会严重且意外地破坏跨设备兼容性。

正如其他人已经回答的那样（我还没有足够的声誉来支持或评论）已经说过，它必须使用 css/div 样式等来完成，这样在每个选项标签中具有完整的 html 功能的可扩展性更高以及（通过 css 样式）对移动设备友好。

于 2014-11-13T06:53:34.363 回答
3

如果您的案例是围绕 iOS 截断长选项文本，那么如何在 iOS7 上的 <select> 元素上修复截断文本的解决方案可以提供帮助。

在选择列表的末尾添加一个空的 optgroup：

你可以这样实现：

<select>
  <option selected="" disabled="">option first</option>
  <option>another option that is really long and will probably be truncated on a mobile device</option>
  ...
  <optgroup label=""></optgroup>
</select>
于 2016-04-11T20:41:34.987 回答
1

由于select元素的呈现取决于用户代理，恐怕你不能拥有它，除非某些 UA 实际实现它。但是select因为 ListBox 或 ComboBox 从来没有真正需要跨越多行的项目。此外，这会极大地混淆用户，因为他们习惯于一行 = 一项。

于 2009-07-22T13:47:24.840 回答
1

不。

不过，您可以使用单选按钮，它们<label>的 s 可以自动换行。

于 2009-07-22T13:47:51.923 回答
0

通过在 HTML 元素上使用一些带有 CSS 样式的 JavaScript 是可能的，使用像 Dojo Toolkit 这样的框架很容易完成。否则，请使用 Radio 或 Checkbox 控件。

于 2009-07-22T13:57:30.600 回答
0

如果您有很多选择并因此寻找多线可能性，那么还有另一个技巧可能会有所帮助。不要使用select和option标签，而是使用datalist和option标签。这样，用户可以在选择区域内搜索他们的选项。




<input list="stocks" name="stockArea" placeholder="hello">
<label for="stockArea">Select Your Stock</label>
<datalist id="stocks">
  <option value="Microsoft" >
  <option value="Lenovo">
  <option value="Apple">
  <option value="Twitter">
  <option value="Amazon">
</datalist>
于 2021-08-27T08:37:13.450 回答
-6

关于什么：

<!DOCTYPE html>
<html>
<body>

<select size="13" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

我不知道这是否是您正在寻找的，但也许它可以帮助您。

如果要选择多个选项，则必须按住 Ctrl 键并单击以选择更多选项。

如果要禁用多选，只需从 SELECT 标记中删除“multiple”参数。

于 2016-05-02T00:56:08.000 回答