La etiqueta <select> se utiliza para crear una lista desplegable en un documento HTML. Generalmente, se utiliza en los formularios cuando se pretende recabar algún dato del usuario. De forma predeterminada, todos los valores u opciones se pueden elegir o seleccionar de la lista desplegable creada con el elemento <select>. Sin embargo, a veces es posible que deseemos que el usuario seleccione entre algunas opciones posibles, siempre que otras opciones estén deshabilitadas de forma predeterminada.
Método 1: Esto se puede hacer usando el atributo deshabilitado. Cuando se especifica, una opción se vuelve inutilizable y no se puede hacer clic. El código siguiente muestra este método.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#container {
margin: 0 auto;
height: 300px;
width: 650px;
border: 5px solid black;
background-color: rgb(104, 241, 104);
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tagging {
height: 60px;
width: 130px;
border: 2px solid black;
font-family: cursive;
}
</style>
</head>
<body>
<div id="container">
<h1 id="heading1">
GeeksforGeeks - A computer Science Portal
</h1>
<select class="tagging">
<option value="tag" disabled>Choose course</option>
<option value="Option A">DSA</option>
<option value="Option B">Python</option>
<option value="Option C">Java</option>
<option value="Option D">Others</option>
</select>
</div>
</body>
</html>
Salida En este ejemplo, «Elegir curso» se ha deshabilitado usando el atributo «deshabilitado». Aunque hay cinco opciones en la lista desplegable, hemos impedido que los usuarios seleccionen la primera opción.
Método 2: El siguiente ejemplo se demuestra usando la etiqueta <optgroup> en HTML5. La etiqueta <optgroup> se utiliza para agrupar opciones relacionadas en un elemento <select> (lista desplegable).
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#container {
margin: 0 auto;
height: 300px;
width: 650px;
border: 5px solid black;
background-color: rgb(104, 241, 104);
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tagging {
height: 60px;
width: 130px;
border: 2px solid black;
font-family: cursive;
}
</style>
</head>
<body>
<div id="container">
<h1 id="heading1">
GeeksforGeeks - A computer Science Portal
</h1>
<select class="tagging">
<optgroup label="Choose Course">
<option value="Option A">DSA</option>
<option value="Option B">Python</option>
<option value="Option C">Java</option>
<option value="Option D">Others</option>
</optgroup>
</select>
</div>
</body>
</html>
Salida: En este ejemplo, la etiqueta <optgroup> se ha utilizado para agrupar las cuatro opciones y, por lo tanto, evitar que el usuario seleccione la opción «Elegir curso».
Publicación traducida automáticamente
Artículo escrito por tanyagarg3434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA