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会使“选择一个”成为默认选择值，但也会让用户无法实际选择项目，如下所示：

Dropdown menu

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;隐藏列表中的项目。

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>

如果你愿意，可以留空而不是说选择一个。

Answer 8

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

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

Answer 9

使用具有所选属性的默认选项

<select>
        <option value="" selected>Choose 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 10

您可以创建下拉标题|标签，其中包含为旧设备或不受支持的设备选择的，隐藏的和样式。

$products = Product::where('name', 'like', '%'.$request->q.'%')->orWhere('symbol', 'like', '%'.$request->q.'%')->with(['customers' => function ($query, $id) {
    $query->where('id', '=', $id);
}])->get();

Answer 11

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

HTML元素在一个元素内创建一组选项。（来源：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>

Answer 12

<select name="city">
   <option value ="0">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>

您可以使用值的唯一ID

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

12 个答案: