使用 datalist 分组输入

Posted 2023-03-31

【中文标题】使用 datalist 分组输入

【英文标题】：Input with datalist grouping

【发布时间】：2016-01-23 11:59:10

【问题描述】：

我通过两种方式使用 select：

带有禁用选项。 带有 optgroup 标签。

<select name="curso1" id="curso1">
    <option disabled="" style="font-size:12px; text-align:left; font-family:Arial Black">Group</option>
    <option value="1">Windows 8</option>
    <option value="8">lalalala</option>
</select>
<select>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

如何在数据列表中执行此操作？

datalist如何分组？

【参考方案1】：

这在 Chrome 上看起来很整洁，但我不知道它在其他浏览器中会如何呈现。

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Brave">GroupA</option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
  <option value="Opera">GroupB</option>
  <option value="Internet Explorer"></option>
  <option value="Microsoft Edge"></option>
</datalist>

【讨论】：

在我的测试中，Chrome 是唯一在右侧显示值的浏览器。

在带有 chrome 的 macos 上显示有点不同，但它仍然有效：i.stack.imgur.com/PQqvWm.png（safari 不显示组）

Safari 现在在 MacOS 上显示组（版本 14.0）。