Как установить значение по умолчанию для элемента HTML <select>?

Question

Я думал, что добавление атрибута "value", установленного для элемента <select> ниже, приведет к тому, что <option>, содержащий мои предоставленные "value", будут выбраны по умолчанию:

<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Однако это не сработало, как я ожидал. Как установить, какой элемент <option> выбран по умолчанию?

Answer 1

Установите selected="selected" для опции, которую вы хотите использовать по умолчанию.

<option selected="selected">
3
</option>

Answer 2

Если вы хотите, чтобы текст по умолчанию использовался как заполнитель / подсказка, но не считался допустимым значением (что-то вроде «завершить здесь», «выберите свою страну» и т. Д.), Вы можете сделать что-то вроде этого:

<select>
  <option value="" selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Answer 3

Полный пример:

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 

Answer 4

Я сталкивался с этим вопросом, но принятый и высоко оцененный ответ не работал для меня. Оказывается, если вы используете React, то установка selected не работает.

Вместо этого вы должны установить значение в теге <select> напрямую, как показано ниже:

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Узнайте больше о причинах здесь на странице Реакт .

Answer 5

Вы можете сделать это так:

<select name="hall" id="hall">
    <option> 1 </option>
    <option> 2 </option>
    <option selected> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
</select> 

Укажите ключевое слово selected в теге option, который по умолчанию должен отображаться в раскрывающемся списке.

Или вы также можете указать атрибут тега option, т. Е.

<option selected="selected">3</option>

Answer 6

, если вы хотите использовать значения из формы и сохранять их динамические, попробуйте это с php

<form action="../<SamePage>/" method="post">


<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  <option <?php if($selected == '1'){echo("selected");}?>>1</option>
  <option <?php if($selected == '2'){echo("selected");}?>>2</option>

</select>
</form>

Answer 7

Я предпочитаю это:

<select>
   <option selected hidden>Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

«Выбрать здесь» исчезает после выбора опции.

Answer 8

Улучшение ответа нобита .Также вы можете улучшить визуальный вид раскрывающегося списка, скрыв элемент «Выбрать здесь».

<select>
  <option selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Answer 9

Другой пример;используя JavaScript, чтобы установить выбранную опцию.

(Вы можете использовать этот пример для зацикливания массива значений в раскрывающийся компонент)

<select id="yourDropDownElementId"><select/>

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

Answer 10

Атрибут selected является логическим атрибутом.

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

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

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select>