Seleccionar valor predeterminado en HTML

Sushant Poudel 19 febrero 2023
  1. Utilice selected="selected" para seleccionar el valor predeterminado para un elemento HTML <select>
  2. Utilice la <option selected> para seleccionar el valor predeterminado para un elemento HTML <select>
Seleccionar valor predeterminado en HTML

Este artículo discutirá dos métodos para seleccionar el valor predeterminado para un elemento HTML <select>.

Utilice selected="selected" para seleccionar el valor predeterminado para un elemento HTML <select>

Podemos usar la opción selected="selected" para seleccionar el valor predeterminado en un código HTML. Escribimos el atributo selected en la etiqueta <option>. Podemos establecer el valor del atributo selected en selected para seleccionar la opción específica por defecto cuando la página web se carga por primera vez. Se llama atributo booleano en HTML. La opción preseleccionada se mostrará primero en la lista desplegable. Este atributo solo se puede utilizar en el elemento <option>. Es compatible con navegadores web como Google Chrome, Internet Explorer, Firefox, Opera, etc.

Por ejemplo, dentro del cuerpo HTML, cree una etiqueta <select> seguida de cinco opciones dentro de ella. Escriba los números del 1 al 5 para el atributo value de cada opción. Escriba el texto de One a Five entre la etiqueta <option> para cada opción. A continuación, escriba el atributo selected con el valor selected justo después de abrir la etiqueta <option> en ese valor particular que desea seleccionar como valor predeterminado (opción 3 en el ejemplo siguiente). Finalmente, cierre la etiqueta <select>.

El siguiente ejemplo utiliza el método select=selected para seleccionar el valor predeterminado en una lista desplegable. Creamos una lista desplegable que nos permite seleccionar valores de One a Five. Cuando se vuelve a cargar la página, la opción Three se carga por defecto porque hemos utilizado el atributo selected para especificar el elemento como predeterminado.

Código de ejemplo:

<body>
<select>
    <option  value="1">One</option>
    <option  value="2">Two</option>
    <option  selected="selected"  value="3">Three</option>
    <option  value="4">Four</option>
    <option  value="5">Five</option>
</select>
</body>

Utilice la <option selected> para seleccionar el valor predeterminado para un elemento HTML <select>

Podemos usar la opción <option selected> para seleccionar un valor predeterminado en HTML. Este proceso también es algo similar al primero. También es un atributo booleano. El elemento <select> se utiliza principalmente para recopilar información del usuario. La etiqueta <option>, que escribimos dentro del elemento <select>, define los elementos disponibles contenidos en la lista desplegable. Podemos escribir la opción selected en la etiqueta <option> particular para especificar la opción como una opción seleccionada por defecto.

Por ejemplo, dentro del cuerpo HTML, cree una etiqueta <select> seguida de la etiqueta <option> como en el método anterior. En la siguiente línea, especifique valores de 1-5 a la etiqueta de opción y cierre la etiqueta de opción. Repite este proceso cinco veces. Luego, escriba <selected> justo después de la segunda etiqueta <option> para seleccionarla como su valor predeterminado. Finalmente, cierre la etiqueta <select>.

El siguiente ejemplo utiliza la opción <opción seleccionada> para seleccionar el valor predeterminado. Cuando se carga la página, podemos ver que la opción 2 se carga por defecto en la lista desplegable porque usamos la <opción seleccionada> en el caso del segundo elemento.

Código de ejemplo:

<body>
    <select>
        <option> 1 </option>
        <option  selected> 2 </option>
        <option> 3 </option>
        <option> 4 </option>
        <option> 5 </option>
    </select>
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn