如何给HTML的选择标签添加标题

Question

我应该如何在选项标签中设置标题？这是我的选择框：

<select>
    <option value="sydney">Sydney</option>
    <option value="melbourne">Melbourne</option>
    <option value="cromwell">Cromwell</option>
    <option value="queenstown">Queenstown</option>
</select>

当我访问这个网站时，默认情况下它会显示"悉尼"。但是我想显示一个标题，比如"你的城市叫什么名字？"

- Alamin

Answer 1

<select>
    <option selected disabled>Choose one</option>
    <option value="sydney">Sydney</option>
    <option value="melbourne">Melbourne</option>
    <option value="cromwell">Cromwell</option>
    <option value="queenstown">Queenstown</option>
</select>

使用selected和disabled将使"选择一个"成为默认选定的值，但也会使用户无法实际选择该项，如下所示：

- kba

---

永远不可能禁止提交用户输入（或修改客户端字段）。 - BLaZuRE

当然，用户可以做任何他们想做的事情并提交完全不相关的值，但是我们不要把这变成一个关于数据卫生的辩论。我想说的是用户不能选择“选择其中一个”。这是一种可用性功能，而不是安全功能。 - kba

如果用户在没有触碰选项的情况下提交了“select”表单，那么会不会提交“disabled”字段？ - user31782

Answer 2

<select>
    <optgroup label = "Choose One">
    <option value ="sydney">Sydney</option>
    <option value ="melbourne">Melbourne</option>
    <option value ="cromwell">Cromwell</option>
    <option value ="queenstown">Queenstown</option>
    </optgroup>
</select>

- b3tac0d3

---

你不能依赖于浏览器最初在选择框中显示optgroup标签，这正是OP想要的。 - osullic

Answer 3

您可以将其与selected和hidden组合使用

<select class="dropdown" style="width: 150px; height: 26px">
        <option selected hidden>What is your name?</option>
        <option value="michel">Michel</option>
        <option value="thiago">Thiago</option>
        <option value="Jonson">Jonson</option>
</select>

您的下拉菜单标题将被选中，用户无法选择。

- user5035605

Answer 4

您可以使用以下内容：

<select data-hai="whatup">
      <option label="Select your city">Select your city</option>
      <option value="sydney">Sydney</option>
      <option value="melbourne">Melbourne</option>
      <option value="cromwell">Cromwell</option>
      <option value="queenstown">Queenstown</option>
</select>

- Jothi Kannan

Answer 5

我认为这会有帮助：

<select name="select_1">
    <optgroup label="First optgroup category">
      <option selected="selected" value="0">Select element</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
    </optgroup>
    <optgroup label="Second optgroup category">
      <option value="5">Option 4</option>
      <option value="6">Option 5</option>
      <option value="7">Option 6</option>
    </optgroup>
</select>

- kiran puppala

---

为什么会有帮助？ - Paul Rooney

这看起来像是 b3tac0d3 解决方案的复制粘贴。我没有看到任何增加价值的东西？ - HoldOffHunger

Answer 6

<option value="" selected style="display:none">Please select one item</option>

在列表中隐藏项目，可以使用selected或者display: none;。

- Amir Hossein Khateri

Answer 7

您可以添加一个没有值但有提示信息的option标签，放在其他选项标签的最上方，如下所示：

<select>
        <option value="">Choose One</option>
        <option value ="sydney">Sydney</option>
        <option value ="melbourne">Melbourne</option>
        <option value ="cromwell">Cromwell</option>
        <option value ="queenstown">Queenstown</option>
</select>

如果您愿意，也可以将其留空而不是说“选择一个”。

- MitulP91

---

我认为你的答案在没有 value 属性的情况下是正确的。为什么要加上它呢？ - BLaZuRE

@BLaZuRE 我原本以为选项标签需要一个值标签。我一开始忘记加上它了。你能把它省略掉吗？ - MitulP91

当未指定值时，一些浏览器（也许不配被称为“浏览器”，但这是另一个争论的话题；）会使用标题（“选择一个”）作为值。因此最好明确添加value = ""。 - Pierre-Olivier Vares

Answer 8

通常，我建议您使用<optgroup>选项，因为它可以为元素提供一些漂亮的样式和缩进。

HTML <optgroup> 元素创建了一个选项组。 (来源：MDN Web Docs：<optgroup>)。

但是，由于 <optgroup> 不能成为选中的值，您可以制作一个 <option selected disabled> 并使用CSS对其进行样式设置，以使其表现得像 <optgroup>。

.optionGroup {
    font-weight: bold;
    font-style: italic;
}

<select>
    <option class="optionGroup" selected disabled>Choose one</option>
    <option value="sydney" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Queenstown</option>
</select>

- HoldOffHunger

Answer 9

您可以创建带有选定、隐藏和样式的下拉标题 | 标签，以适应旧设备或不支持的设备。

<select name="city" >
<option selected hidden style="display:none">What is your city</option>
   <option value="1">Sydney</option>
   <option value="2">Melbourne</option>
   <option value="3">Cromwell</option>
   <option value="4">Queenstown</option>
</select>

- Zlocorp

Answer 10

第一个选项的文本将始终显示为默认标题。

   <select>
        <option value ="">What is the name of your city?</option>
        <option value ="sydney">Sydney</option>
        <option value ="melbourne">Melbourne</option>
        <option value ="cromwell">Cromwell</option>
        <option value ="queenstown">Queenstown</option>
   </select>

- aizaz

---

据我所记，这不是真的。Firefox曾经“记住”下拉菜单中上次选择的位置，因此我认为您不应该依赖于默认情况下始终选择第一个选项。 - Michał Rybak