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

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

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

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

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

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

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

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

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

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

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

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

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

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

если вы хотите использовать значения из формы и сохранить их динамические, попробуйте это с 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

Другой пример; используя 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);

Выбранный атрибут является логическим атрибутом.

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

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

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

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

Если вы используете 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>

Я использовал эту функцию 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 каждый раз, когда страница загружается (и этот код находится внутри формы, которая публикует сообщения), то по умолчанию выбирается ранее выбранное значение.

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

Этот код устанавливает значение по умолчанию для элемента выбора 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>

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

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

вместо,

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

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

Я просто сделал бы значение первого параметра выбора значением по умолчанию и просто скрыл это значение в раскрывающемся списке с помощью новой скрытой функции 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>

Я сам использую это

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

Вам просто нужно поставить атрибут «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>

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

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

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

Проблема в <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>

Я использую 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";

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

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

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

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

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
});

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>