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





opcion primer (18)


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>

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?




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> 



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 .




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.




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

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



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



Ejemplo completo:

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




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>



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




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




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>




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



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>



Puedes usar:

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

en lugar de,

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

ambos son igualmente correctos




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>



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>



$('#graphtype option[value=""]').prop("selected", true);

Esto funciona bien donde #graphtype es el id de la etiqueta seleccionada.

etiqueta de selección de ejemplo:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>




html html-select