Як я можу встановити значення за замовчуванням для елемента 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> 

Введіть "вибране" ключове слово всередині тегу опцій, яке ви хочете відображати за замовчуванням у своєму спадному списку.

Або ви також можете надати атрибут тегу опцій, тобто

<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 з кутовим 1, то вам потрібно використовувати ng-init, інакше другий параметр не буде обраний, оскільки ng-модель заміняє вибране значення за замовчуванням.

<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 встановлений на тегу .... Я вирішив цю проблему таким чином

Цей код встановлює значення за замовчуванням для елемента вибору 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>

Вам просто потрібно поставити атрибут "вибраний" на певний параметр, а не направити для вибору елемента.

Ось фрагмент одного і того ж численного робочого прикладу з різними значеннями.

   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>

Встановити вибраний = "вибрано", де значення параметра - 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>