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

admin

Más de 5 meses

0
0
50
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:

<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