58

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

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

当我访问该站点时，默认情况下它显示“悉尼”。但我想显示一个标题，例如“你所在城市的名称是什么？”

4

13 回答 13

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

使用selectedanddisabled将使“选择一个”成为默认选择值，但也使用户无法实际选择项目，如下所示：

下拉式菜单

于 2013-08-12T05:25:09.867 回答
39 
<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>
于 2014-02-01T03:37:28.933 回答
25

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

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

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

于 2015-06-22T09:40:40.507 回答
8

您可以使用以下

<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>
于 2013-08-12T05:24:26.047 回答
7

我认为这会有所帮助： 

<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>
于 2017-05-29T08:43:36.257 回答
5 
<option value="" selected style="display:none">Please select one item</option>

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

于 2017-10-17T15:10:49.383 回答
2

您可以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>

或者将其留空，而不是说如果需要，请选择一个。

于 2013-08-12T05:20:34.853 回答
1

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

HTML 元素在一个元素中创建一组选项。（来源：MDN 网络文档：<optgroup> .

但是，由于 an<optgroup>不能是选定的值，您可以制作 an<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>

于 2020-11-19T17:26:48.783 回答
0

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

   <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>
于 2013-08-12T05:20:47.130 回答
0

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

<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>
于 2013-08-12T05:22:21.540 回答
0

我添加了一个<div>，它工作正常

<div title="Your title here!">
    <select>
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
        <option value="queenstown">Queenstown</option>
    </select>
</div>

于 2021-12-07T22:30:50.737 回答
0

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

<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>
于 2018-11-18T12:14:09.320 回答
-2 
<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 作为值

于 2013-08-12T05:22:44.963 回答