¿Cómo puedo establecer el valor predeterminado para un elemento HTML <select>?

Pensé que agregar un "value"conjunto de atributos en el <select>elemento a continuación provocaría <option>que "value"se seleccionara el que contiene mi proporcionado por defecto:

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

Sin embargo, esto no funcionó como esperaba. ¿Cómo puedo establecer qué <option>elemento está seleccionado por defecto?

Establezca selected="selected"la opción que desea que sea la predeterminada.

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

En caso de que desee tener un texto predeterminado como una especie de marcador de posición / pista pero no se considere un valor válido (algo así como "complete aquí", "seleccione su nación", etc.) puede hacer algo como esto:

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

Ejemplo completo:

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

Encontré esta pregunta, pero la respuesta aceptada y altamente votada no funcionó para mí. Resulta que si está utilizando React, la configuración selectedno funciona.

En su lugar, debe establecer un valor en la <select>etiqueta directamente como se muestra a continuación:

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

Lea más sobre por qué aquí en la página Reaccionar .

Puedes hacerlo así:

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

Proporcione la palabra clave "seleccionada" dentro de la etiqueta de opción, que desea que aparezca de forma predeterminada en su lista desplegable.

O también puede proporcionar un atributo a la etiqueta de opción, es decir

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

si desea utilizar los valores de un formulario y mantenerlo dinámico, intente esto con 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>

Prefiero esto:

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

'Elegir aquí' desaparece después de seleccionar una opción.

Una mejora para la respuesta de nobita . También puede mejorar la vista visual de la lista desplegable, ocultando el elemento 'Elegir aquí'.

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

La mejor manera en mi opinión:

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

¿Por qué no deshabilitado?

Cuando usa el atributo deshabilitado junto con el <button type="reset">Reset</button>valor no se restablece al marcador de posición original. En cambio, el navegador elige primero la opción no deshabilitada que puede causar errores de usuario.

Valor vacío predeterminado

Cada formulario de producción tiene validación, entonces el valor vacío no debería ser un problema. De esta manera, puede que tengamos vacío, no es necesario seleccionar.

Atributos de sintaxis XHTML

selected="selected"La sintaxis es la única forma de ser compatible con XHTML y HTML 5. Es una sintaxis XML correcta y algunos editores pueden estar contentos con esto. Es más compatible con versiones anteriores. No tengo sentimientos fuertes sobre esto, pero si los argumentos mencionados anteriormente son sus requisitos, debe seguir la sintaxis completa.

Otro ejemplo; usando JavaScript para establecer una opción seleccionada.

(Podría usar este ejemplo para buclear una matriz de valores en un componente desplegable)

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

El atributo seleccionado es un atributo booleano.

Cuando está presente, especifica que se debe preseleccionar una opción cuando se carga la página.

La opción preseleccionada se mostrará primero en la lista desplegable.

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

Si está en reacción, puede usarlo defaultValuecomo atributo en lugar de valueen la etiqueta de selección.

Si está usando select con angular 1, entonces necesita usar ng-init, de lo contrario, la segunda opción no se seleccionará ya que ng-model anula el valor predeterminado seleccionado

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

Usé esta función php para generar las opciones e insertarla en mi 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;
  }

?>

Y luego, en el código de mi página web, lo uso como a continuación;

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

Si $ endmin se crea a partir de una variable _POST cada vez que se carga la página (y este código está dentro de un formulario que se publica), el valor seleccionado previamente se selecciona de forma predeterminada.

Falta el atributo de valor de la etiqueta, por lo que no se muestra como se ha seleccionado. Por defecto, la primera opción se muestra en la carga de la página desplegable, si el atributo de valor está configurado en la etiqueta ... Resolví mi problema de esta manera

Este código establece el valor predeterminado para el elemento de selección HTML con 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>

Puedes usar:

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

en vez de,

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

Ambos son igualmente correctos.

Simplemente haría que el valor de la primera opción de selección sea el predeterminado y simplemente oculte ese valor en el menú desplegable con la nueva función "oculta" de HTML5. Me gusta esto:

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

Yo mismo lo uso

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

Solo necesita poner el atributo "seleccionado" en una opción particular, en lugar de dirigirlo directamente al elemento seleccionado.

Aquí hay un fragmento para el mismo ejemplo de trabajo múltiple con valores diferentes.

   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>

Establecer seleccionado = "seleccionado" donde el valor de la opción es 3

por favor vea el siguiente ejemplo

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

El problema <select>es que a veces se desconecta con el estado de lo que se procesa actualmente y, a menos que algo haya cambiado en la lista de opciones, no se devuelve ningún valor de cambio. Esto puede ser un problema al intentar seleccionar la primera opción de una lista. El siguiente código puede obtener la primera opción seleccionada onchange="changeFontSize(this)"por primera vez, pero por sí misma no lo haría. Existen métodos descritos anteriormente que utilizan una opción ficticia para obligar a un usuario a realizar un cambio de valor para recoger el primer valor real, como comenzar la lista con un valor vacío. Nota: onclick llamaría a la función dos veces, el siguiente código no lo hace, pero resuelve el problema por primera vez.

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

Uso Angular y configuro la opción predeterminada por

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

Guión:

sselectedVal:any="test1";

Así es como lo hice ...

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

Puedes intentarlo así

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

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

Fragmento de JavaScript nativo:

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>