html - una - select opcion por defecto

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

Question

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?

Answer 1

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>

Answer 2

Ejemplo completo:

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

Answer 3

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>

Answer 4

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>

Answer 5

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>

Answer 6

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

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

Answer 7

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>

Answer 8

Me encontré con esta pregunta, pero la respuesta aceptada y altamente calificada no me funcionó. Resulta que si está utilizando React, la configuración selected no funciona.

En su lugar, debe establecer un valor en la etiqueta <select> 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 acerca de por qué aquí en la página React .

Answer 9

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

(Podría usar este ejemplo para hacer un bucle de 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);

Answer 10

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.

Answer 11

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>

Answer 12

Puedes usar:

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

en lugar de,

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

ambos son igualmente correctos

Answer 13

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>

Answer 14

Si está reaccionando, puede usar el valor defaultValue como atributo en lugar del value en la etiqueta seleccionada.

Answer 15

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>

Answer 16

Simplemente haría que el primer valor de la opción de selección fuera el predeterminado y simplemente ocultaría 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>

Answer 17

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>

Answer 18

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>

Answer 19

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.

Answer 20

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>

Answer 21

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