Я думал, что добавление атрибута "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> выбран по умолчанию?

1753
Jichao 19 Авг 2010 в 05:10

30 ответов

Лучший ответ

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

<option selected="selected">
3
</option>
2421
Borealid 18 Мар 2020 в 12:10

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

<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>
848
Aurelio 17 Авг 2017 в 21:58

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

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 
250
Al Foиce ѫ 25 Авг 2016 в 22:00

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

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

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

Узнайте больше о том, почему здесь, на странице React.

113
MindJuice 22 Июн 2016 в 23:37

Сделать это можно так:

<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>
74
Jason Sturges 4 Июл 2012 в 06:20

Если вы хотите использовать значения из формы и сохранить ее динамически, попробуйте это с помощью 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>
57
zero323 16 Окт 2013 в 21:01

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

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

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

41
Chong Lip Phang 6 Сен 2016 в 22:59

На мой взгляд, лучший способ:

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

Почему не отключено?

При использовании атрибута disabled вместе с <button type="reset">Reset</button> значение не сбрасывается до исходного заполнителя. Вместо этого браузер выбирает первую не отключенную опцию, которая может вызвать ошибки пользователя.

Пустое значение по умолчанию

Каждая производственная форма имеет валидацию, поэтому пустое значение не должно быть проблемой. Таким образом, у нас может быть пустой, необязательный выбор.

Атрибуты синтаксиса XHTML

Синтаксис selected="selected" - единственный способ обеспечить совместимость как с XHTML, так и с HTML 5. Это правильный синтаксис XML, и некоторые редакторы могут быть довольны этим. Он более обратно совместим. Если соответствие XML важно, вы должны следовать полному синтаксису.

37
Michał Mielec 10 Фев 2021 в 10:51

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

<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>
32
Community 23 Май 2017 в 12:34

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

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

<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);
20
Ally 17 Сен 2013 в 06:37

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

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

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

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 
15
tilak 25 Окт 2013 в 04:12

Если вы в ответе, вы можете использовать defaultValue в качестве атрибута вместо value в теге select.

9
Johan 23 Ноя 2017 в 08:12

Если вы используете select с angular 1, вам нужно использовать ng-init, иначе второй вариант не будет выбран, поскольку ng-model переопределяет выбранное значение по умолчанию

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</option>
</select>
7
Akshay Vijay Jain 8 Ноя 2017 в 06:48

Я бы просто сделал первое значение параметра выбора значением по умолчанию и просто скрывал это значение в раскрывающемся списке с помощью новой «скрытой» функции HTML5. Как это:

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>
5
Ahmedakhtar11 4 Сен 2018 в 08:08

Я использовал эту функцию php для создания параметров и вставил ее в свой HTML-код.

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

И затем в коде моей веб-страницы я использую его, как показано ниже:

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

Если $ endmin создается из переменной _POST каждый раз, когда страница загружается (и этот код находится внутри формы, которая публикует сообщения), то по умолчанию выбирается ранее выбранное значение.

4
Graeme 7 Янв 2014 в 13:02

Атрибут value тега отсутствует, поэтому он не отображается как желаемый. По умолчанию первая опция отображается при загрузке раскрывающейся страницы, если в теге установлен атрибут value .... Таким образом я решил свою проблему.

4
X-Coder 2 Июн 2015 в 05:49

Ты можешь использовать:

<option value="someValue" selected>Some Value</option>

Вместо того,

<option value="someValue" selected = "selected">Some Value</option>

Оба одинаково верны.

3
sam 7 Май 2018 в 16:30

Установите selected = "selected", где значение параметра равно 3

Пожалуйста, смотрите ниже пример

<option selected="selected" value="3" >3</option>
3
Akbor 12 Фев 2020 в 08:22

Сам пользуюсь

<select selected=''>
    <option value=''></option>
    <option value='1'>ccc</option>
    <option value='2'>xxx</option>
    <option value='3'>zzz</option>
    <option value='4'>aaa</option>
    <option value='5'>qqq</option>
    <option value='6'>wwww</option>
</select>
2
samayo 2 Окт 2017 в 13:47

Проблема с <select> в том, что он иногда не связан с состоянием того, что в настоящее время отображается, и, если что-то не изменилось в списке параметров, значение изменения не возвращается. Это может быть проблемой при попытке выбрать первый вариант из списка. Следующий код может получить первый вариант при первом выборе, но сам по себе onchange="changeFontSize(this)" этого не сделает. Существуют методы, описанные выше, с использованием фиктивного параметра, заставляющего пользователя внести изменение в значение для получения фактического первого значения, например, запуск списка с пустым значением. Примечание: onclick вызовет функцию дважды, следующий код - нет, но решает проблему, возникшую в первый раз.

<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">           
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="extraLarge">Extra large</option>
</select>

<script>
function changeFontSize(x){
    body=document.getElementById('body');
    if (x.value=="extraLarge") {
        body.style.fontSize="25px";
    } else {
        body.style.fontSize=x.value;
    }
}
</script>
1
nilsw 9 Авг 2018 в 00:02

Я использую Angular и устанавливаю параметр по умолчанию

Шаблон HTML

<select #selectConnection [(ngModel)]="selectedVal" class="form-control  col-sm-6 "  max-width="100px"   title="Select" 
      data-size="10"> 
        <option  >test1</option>
        <option >test2</option>      
      </select>

Скрипт:

sselectedVal:any="test1";
1
upog 3 Сен 2019 в 16:34

Фрагмент HTML:

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

Собственный фрагмент кода JavaScript:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});
1
Mwspace LLC 12 Янв 2020 в 16:30

По умолчанию выбрано значение Option-4 .

  <html:select property="status" value="OPTION_4" styleClass="form-control">
            <html:option value="">Select</html:option>
            <html:option value="OPTION_1"  >Option-1</html:option>
            <html:option value="OPTION_2"  >Option-2</html:option>
            <html:option value="OPTION_3"  >Option-3</html:option>
            <html:option value="OPTION_4"  >Option-4</html:option>
            <html:option value="OPTION_5"  >Option-5</html:option>                                  
   </html:select>
1
Jimmy 25 Фев 2021 в 10:37

Для работы этого решения вам понадобится атрибут id в каждой опции:

<script>
function select_option (id,value_selected) {

 var select; 
 select = document.getElementById(id);
 if (select == null) return 0;
 
 var option;
 option = select.options.namedItem(value_selected);
 if (option == null) return 0;

 option.selected = "selected";
 return true;
} 
</script>

<select name="hall" id="hall">
  <option id="1">1</option>
  <option id="2">2</option>
  <option id="3">3</option>
  <option id="4">4</option>
  <option id="5">5</option>
</select>
<script>select_option ("hall","3");</script> 

Функция сначала пытается найти select > с идентификатором, затем она будет искать value_selected в параметрах < select > и если он найдет его, он установит атрибут selected , возвращающий true. В противном случае неверно

1
alvaroc 7 Апр 2021 в 00:16

Вот как я это сделал ...

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

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

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

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>
0
AlexM 19 Окт 2013 в 22:33

Вы можете попробовать вот так

  <select name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>
0
tebbe93 27 Окт 2019 в 11:30
Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>
0
access_granted 19 Апр 2020 в 01:13

Чтобы установить значение по умолчанию с использованием PHP и JavaScript:

State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
    echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>
0
gom 3 Ноя 2020 в 10:47

Этот код устанавливает значение по умолчанию для элемента выбора HTML с помощью PHP.

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>
4
Julian 12 Апр 2018 в 07:34

Вам просто нужно поставить атрибут «selected» на конкретную опцию вместо того, чтобы напрямую выбирать элемент.

Вот фрагмент одного и того же и нескольких рабочих примеров с разными значениями.

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
2
Ambuj Khanna 11 Сен 2018 в 05:19