How can I set the default value for an HTML select element

Question

I thought that adding a  value  attribute set on the  lt select gt  element below would cause the  lt option gt  containing my provided  value  to be selected by default    x000D   x000D   lt select name  hall  id  hall  value  3  gt  x000D     lt option gt 1 lt  option gt  x000D     lt option gt 2 lt  option gt  x000D     lt option gt 3 lt  option gt  x000D     lt option gt 4 lt  option gt  x000D     lt option gt 5 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    However  this did not work as I had expected  How can I set which  lt option gt  element is selected by default

User · Answer

I came across this question  but the accepted and highly upvoted answer didn t work for me   It turns out that if you are using React  then setting selected doesn t work   Instead you have to set a value in the  lt select gt  tag directly as shown below    lt select value  B  gt     lt option value  A  gt Apple lt  option gt     lt option value  B  gt Banana lt  option gt     lt option value  C  gt Cranberry lt  option gt   lt  select gt    Read more about why here on the React page

User · Answer

Default selected value is Option-4    lt html select property  quot status quot  value  quot OPTION 4 quot  styleClass  quot form-control quot  gt               lt html option value  quot  quot  gt Select lt  html option gt               lt html option value  quot OPTION 1 quot    gt Option-1 lt  html option gt               lt html option value  quot OPTION 2 quot    gt Option-2 lt  html option gt               lt html option value  quot OPTION 3 quot    gt Option-3 lt  html option gt               lt html option value  quot OPTION 4 quot    gt Option-4 lt  html option gt               lt html option value  quot OPTION 5 quot    gt Option-5 lt  html option gt                                        lt  html select gt

User · Answer

Upstream System   lt select name upstream id upstream gt   lt option value  SYBASE  gt SYBASE ASE  lt option value  SYBASE IQ  gt SYBASE IQ  lt option value  SQLSERVER  gt SQLSERVER  lt  select gt   lt script gt  var obj document getElementById  upstream    for  var i 0 i lt obj length i    if obj options i  value    SYBASE IQ  obj selectedIndex i    lt  script gt

User · Answer

This is how I did it      lt form action      lt SamePage gt    method  post  gt    lt  php     if     POST  drop down                     selected                 else            selected    selected           gt    lt select name  select  size  1  gt      lt option value  1   lt  php  selected   gt  gt One lt  option gt                 OR              lt option value  2   selected gt Two lt  option gt    lt  select gt   lt  form gt

User · Answer

An improvement for nobita s answer  Also you can improve the visual view of the drop down list  by hiding the element  Choose here     x000D   x000D   lt select gt  x000D     lt option selected disabled hidden gt Choose here lt  option gt  x000D     lt option value  1  gt One lt  option gt  x000D     lt option value  2  gt Two lt  option gt  x000D     lt option value  3  gt Three lt  option gt  x000D     lt option value  4  gt Four lt  option gt  x000D     lt option value  5  gt Five lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The problem with  lt select gt  is  it s sometimes disconnected with the state of what s currently rendered and unless something has changed in the option list  no change value is returned  This can be a problem when trying to select the first option from a list  The following code can get the first-option the first-time selected  but onchange  changeFontSize this   by its self would not   There are methods described above using a dummy option to force a user to make a change value to pickup the actual first value  such as starting the list with an empty value  Note  onclick would call the function twice  the following code does not  but solves the first-time problem    lt label gt Font Size lt  label gt   lt select name  fontSize  id  fontSize  onfocus  changeFontSize this   onchange  changeFontSize this   gt                  lt option value  small  gt Small lt  option gt       lt option value  medium  gt Medium lt  option gt       lt option value  large  gt Large lt  option gt       lt option value  extraLarge  gt Extra large lt  option gt   lt  select gt    lt script gt  function changeFontSize x       body document getElementById  body        if  x value   extraLarge             body style fontSize  25px         else           body style fontSize x value           lt  script gt

User · Answer

Another example  using JavaScript to set a selected option     You could use this example to for loop an array of values into a drop down component    lt select id  yourDropDownElementId  gt  lt select  gt      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

User · Answer

Best way in my opinion   lt select gt      lt option value  quot  quot  selected  quot selected quot  hidden  quot hidden quot  gt Choose here lt  option gt      lt option value  quot 1 quot  gt One lt  option gt      lt option value  quot 2 quot  gt Two lt  option gt      lt option value  quot 3 quot  gt Three lt  option gt      lt option value  quot 4 quot  gt Four lt  option gt      lt option value  quot 5 quot  gt Five lt  option gt   lt  select gt   Why not disabled  When you use disabled attribute together with  lt button type  quot reset quot  gt Reset lt  button gt  value is not reset to original placeholder  Instead browser choose first not disabled option which may cause user mistakes  Default empty value Every production form has validation  then empty value should not be a problem  This way we may have empty not required select  XHTML syntax attributes selected  quot selected quot  syntax is the only way to be compatible with both XHTML and HTML 5  It is correct XML syntax and some editors may be happy about this  It is more backward compatible  If XML compliance is important you should follow the full syntax

User · Answer

You just need to put attribute  selected  on a particular option instead direct to select element   Here is snippet for same and multiple working example with different values    x000D   x000D     Select Option 3  -  x000D      lt select name  hall  id  hall  gt  x000D       lt option gt 1 lt  option gt  x000D       lt option gt 2 lt  option gt  x000D       lt option selected  selected  gt 3 lt  option gt  x000D       lt option gt 4 lt  option gt  x000D       lt option gt 5 lt  option gt  x000D      lt  select gt  x000D      x000D      lt br  gt  x000D      lt br  gt  x000D      lt br  gt  x000D     Select Option 5  -  x000D      lt select name  hall  id  hall  gt  x000D       lt option gt 1 lt  option gt  x000D       lt option gt 2 lt  option gt  x000D       lt option gt 3 lt  option gt  x000D       lt option gt 4 lt  option gt  x000D       lt option selected  selected  gt 5 lt  option gt  x000D      lt  select gt  x000D      x000D       lt br  gt  x000D      lt br  gt  x000D      lt br  gt  x000D     Select Option 2  -  x000D      lt select name  hall  id  hall  gt  x000D       lt option gt 1 lt  option gt  x000D       lt option selected  selected  gt 2 lt  option gt  x000D       lt option gt 3 lt  option gt  x000D       lt option gt 4 lt  option gt  x000D       lt option gt 5 lt  option gt  x000D      lt  select gt  x000D   x000D   x000D

User · Answer

I used this php function to generate the options  and insert it into my HTML   lt  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  lt    end   i    i    step               retstring    retstring     lt OPTION           retstring    retstring    value      sprintf  formatstring  i               if  default     i                   retstring    retstring     selected  selected                   retstring    retstring     gt     sprintf  formatstring  i      lt  OPTION gt              return  retstring         gt    And then in my webpage code I use it as below    lt select id  endmin  name  endmin  gt     lt  php echo numericoptions 0 55 5   02d   endmin     gt   lt  select gt    If  endmin is created from a  POST variable every time the page is loaded  and this code is inside a form which posts  then the previously selected value is selected by default

User · Answer

If you are in react you can use defaultValue as attribute instead of value in the select tag

User · Answer

I would just simply make the first select option value the default and just hide that value in the dropdown with HTML5 s new  hidden  feature  Like this       lt select name    id    gt        lt option hidden value  default  gt Select An Option lt  option gt        lt option value  1  gt One lt  option gt        lt option value  2  gt Two lt  option gt        lt option value  3  gt Three lt  option gt        lt option value  4  gt Four lt  option gt      lt  select gt

User · Answer

I use Angular and i set the default option by  HTML Template   lt select  selectConnection   ngModel    selectedVal  class  form-control  col-sm-6    max-width  100px    title  Select         data-size  10  gt            lt option   gt test1 lt  option gt           lt option  gt test2 lt  option gt               lt  select gt    Script   sselectedVal any  test1

User · Answer

To set the default using PHP and JavaScript  State   lt select id  quot State quot  gt   lt option value  quot  quot  selected disabled hidden gt  lt  option gt   lt option value  quot Andhra Pradesh quot  gt Andhra Pradesh lt  option gt   lt option value  quot Andaman and Nicobar Islands quot  gt Andaman and Nicobar Islands lt  option gt       lt option value  quot West Bengal quot  gt West Bengal lt  option gt   lt  select gt   lt  php if isset   GET  State          echo  lt  lt  lt heredoc  lt script gt  document getElementById  quot State quot   querySelector  option value  quot    GET  State    quot     selected   true   lt  script gt  heredoc      gt

User · Answer

The selected attribute is a boolean attribute   When present  it specifies that an option should be pre-selected when the page loads   The pre-selected option will be displayed first in the drop-down list    lt select gt     lt option value  volvo  gt Volvo lt  option gt    lt option value  saab  gt Saab lt  option gt    lt option value  vw  gt VW lt  option gt    lt option value  audi  selected gt Audi lt  option gt    lt  select gt

User · Answer

Set selected  selected  for the option you want to be the default    lt option selected  selected  gt  3  lt  option gt

User · Answer

If you are using select with angular 1  then you need to use ng-init  otherwise  second option will not be selected since  ng-model overrides the defaul selected value   lt select ng-model  sortVar  ng-init  sortVar  stargazers count   gt     lt option value  name  gt Name lt  option gt     lt option selected  selected  value  stargazers count  gt Stars lt  option gt     lt option value  language  gt Language lt  option gt   lt  select gt

User · Answer

Complete example    x000D   x000D   lt select name  hall  id  hall  gt   x000D     lt option gt   x000D      1  x000D     lt  option gt   x000D     lt option gt   x000D      2  x000D     lt  option gt   x000D     lt option selected gt   x000D      3  x000D     lt  option gt   x000D     lt option gt   x000D      4  x000D     lt  option gt   x000D     lt option gt   x000D      5  x000D     lt  option gt   x000D   lt  select gt   x000D   x000D   x000D

User · Answer

In case you want to have a default text as a sort of placeholder hint but not considered a valid value  something like  complete here    select your nation  ecc   you can do something like this    x000D   x000D   lt select gt  x000D     lt option value    selected disabled hidden gt Choose here lt  option gt  x000D     lt option value  1  gt One lt  option gt  x000D     lt option value  2  gt Two lt  option gt  x000D     lt option value  3  gt Three lt  option gt  x000D     lt option value  4  gt Four lt  option gt  x000D     lt option value  5  gt Five lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I prefer this    lt select gt      lt option selected hidden gt Choose here lt  option gt      lt option value  1  gt One lt  option gt      lt option value  2  gt Two lt  option gt      lt option value  3  gt Three lt  option gt      lt option value  4  gt Four lt  option gt      lt option value  5  gt Five lt  option gt   lt  select gt     Choose here  disappears after an option has been selected

User · Answer

value attribute of  tag is missing  so it doesn t show as u desired selected  By default first option show on dropdown page load  if value attribute is set on  tag     I got solved my problem this way

User · Answer

You can try like this     lt select name  hall  id  hall  gt         lt option gt 1 lt  option gt         lt option gt 2 lt  option gt         lt option selected  selected  gt 3 lt  option gt         lt option gt 4 lt  option gt         lt option gt 5 lt  option gt       lt  select gt

User · Answer

You can do it like this    lt select name  hall  id  hall  gt       lt option gt  1  lt  option gt       lt option gt  2  lt  option gt       lt option selected gt  3  lt  option gt       lt option gt  4  lt  option gt       lt option gt  5  lt  option gt   lt  select gt     Provide  selected  keyword inside the option tag  which you want to appear by default in your drop down list   Or you can also provide attribute to the option tag i e     lt option selected  selected  gt 3 lt  option gt

User · Answer

You can use    lt option value  someValue  selected gt Some Value lt  option gt    instead of    lt option value  someValue  selected    selected  gt Some Value lt  option gt    both are equally correct

User · Answer

if you want to use the values from a Form and keep it dynamic try this with php   lt form action      lt SamePage gt    method  post  gt     lt  php      selected     POST  select      gt    lt select name  select  size  1  gt      lt option  lt  php if  selected     1   echo  selected      gt  gt 1 lt  option gt     lt option  lt  php if  selected     2   echo  selected      gt  gt 2 lt  option gt    lt  select gt   lt  form gt

User · Answer

This code sets the default value for the HTML select element with PHP      lt select name  hall  id  hall  gt   lt  php      default   3       nr   1      while  nr  lt  10           if  nr     default               echo   lt option selected   selected   gt     nr    lt  option gt                      else              echo   lt option gt     nr    lt  option gt                       nr            gt   lt  select gt

User · Answer

Set selected  selected  where is option value is 3  please see below example   lt option selected  selected  value  3   gt 3 lt  option gt

User · Answer

HTML snippet    lt select data-selected  public  class  form-control  name  role  gt       lt option value  public  gt          Pubblica      lt  option gt       lt option value  user  gt          Utenti      lt  option gt       lt option value  admin  gt          Admin      lt  option gt   lt  select gt    Native JavaScript snippet   document querySelectorAll   data-selected    forEach e   gt       e value   e dataset selected

User · Answer

I myself use it    lt select selected    gt       lt option value    gt  lt  option gt       lt option value  1  gt ccc lt  option gt       lt option value  2  gt xxx lt  option gt       lt option value  3  gt zzz lt  option gt       lt option value  4  gt aaa lt  option gt       lt option value  5  gt qqq lt  option gt       lt option value  6  gt wwww lt  option gt   lt  select gt

[html] How can I set the default value for an HTML <select> element?

Examples related to html

Examples related to html-select