如何为html选择标记添加标题

Question

我如何在select标签中设置标题？这是我的选择框:

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

当我访问该网站时,默认显示"悉尼".但是我想要显示一个标题,例如"你所在城市的名字是什么？"

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将使"选择一个"成为默认选择值,但也使用户无法实际选择项目,如下所示:

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>

Answer 3

您可以将其与选定和隐藏组合

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

您的下拉标题将被选中,用户无法选择.

Answer 4

我认为这会有所帮助:

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

Answer 5

您可以使用以下内容

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

Answer 6

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

使用selected和display: none; 用于列表中的隐藏项。