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




10 Answers

En caso de que desee tener un texto predeterminado como una especie de marcador de posición / sugerencia pero no se considere un valor válido (algo 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>

html html-select

Pensé que agregar un atributo de "value" establecido en el elemento <select> continuación haría que la <option> contiene mi "value" proporcionado se seleccione de forma predeterminada:

<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 configurar el elemento <option> seleccionado de forma predeterminada?




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>



Una mejora para la respuesta de . 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>




El atributo seleccionado es un atributo booleano.

Cuando está presente, especifica que una opción debe ser preseleccionada 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> 



Utilicé 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 en el que se publica), el valor seleccionado previamente se selecciona de forma predeterminada.




Si está utilizando 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>



Puedes usar:

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

en lugar de,

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

ambos son igualmente correctos




El problema con <select> es que a veces se desconecta con el estado de lo que se representa 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 cuando se intenta seleccionar la primera opción de una lista. El siguiente código puede obtener la primera opción la primera vez que se selecciona, pero onchange="changeFontSize(this)" por sí mismo 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 iniciar 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>



Solo debe poner el atributo "seleccionado" en una opción particular, en lugar de hacerlo directamente para seleccionar el elemento.

Aquí hay un fragmento de ejemplo de trabajo igual y múltiple con diferentes valores.

   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>






Related