una - valor por defecto en select html




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

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?


Ejemplo completo:

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </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>

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>


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>

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.


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>

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


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>

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>


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.


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>




html-select