Как добавить заголовок в тег html select

Как мне настроить настройку заголовка в теге select? Вот мой выбор:

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

Когда я посещаю сайт, по умолчанию он показывает "Сидней". Но я хочу показать название, например: "Как зовут ваш город?"

Ответы

Ответ 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 сделает "Выберите один" выбранным по умолчанию значением, но также сделает невозможным выбор пользователем элемента, например:

Ответ 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>

Ответ 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>

Ваш выпадающий заголовок будет выбран и не будет выбран пользователем.

Ответ 4

Вы можете добавить тег 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>

Или оставьте поле пустым, а не произнесите его, если хотите.

Ответ 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>

Ответ 6

Я думаю, что это помогло бы:

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

Ответ 7

Первый текст опции всегда отображается как заголовок по умолчанию.

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

Ответ 8

С параметром по умолчанию с выбранным атрибутом

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

Ответ 9

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

Использование selected и использование display: none; для скрытого элемента в списке.

Ответ 10

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

Вместо этого вы можете использовать уникальный идентификатор для