Ocultar una opción <option></option> de un <select> en HTML

Más de 5 meses
Para ocultar la opción <option value="2">Categoría 2 </option> de un <select> en HTML, puedes utilizar JavaScript o jQuery. Aquí te muestro ambas opciones.
Usando JavaScript
Puedes usar el siguiente código JavaScript para ocultar la opción:
Usando jQuery
Si prefieres usar jQuery, puedes hacerlo de la siguiente manera:
Ambos métodos ocultarán la opción "Categoría 2" del menú desplegable. El usuario no podrá seleccionarla, pero seguirá existiendo en el código HTML.
Usando JavaScript
Puedes usar el siguiente código JavaScript para ocultar la opción:
<select class="opciones required" name="categoria" id="miSelect">
<option value="" selected="selected">Selecciona categoría</option>
<option value="1">Categoría 1</option>
<option value="2">Categoría 2</option>
<option value="3">Categoría 3</option>
</select>
<script>
// Obtener el select por su ID
var select = document.getElementById("miSelect");
// Iterar sobre las opciones para encontrar la que deseas ocultar
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].value === "2") {
// Ocultar la opción
select.options[i].style.display = 'none';
break; // Salir del bucle una vez que se encuentra
}
}
</script>
Usando jQuery
Si prefieres usar jQuery, puedes hacerlo de la siguiente manera:
<select class="opciones required" name="categoria" id="miSelect">
<option value="" selected="selected">Selecciona categoría</option>
<option value="1">Categoría 1</option>
<option value="2">Categoría 2</option>
<option value="3">Categoría 3</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Ocultar la opción con valor 2
$('#miSelect option[value="2"]').hide();
});
</script>
Ambos métodos ocultarán la opción "Categoría 2" del menú desplegable. El usuario no podrá seleccionarla, pero seguirá existiendo en el código HTML.
0 comentarios
Tienes que ser miembro para responder en este tema
Portada

Últimos comentarios