1

Estoy haciendo un registro inventario y quiero que al seleccionar una categoría se oculte. YA medio lo hace, el problema es que al cargar la pagina muestra todo y hasta que no seleccione algo lo muestra todo.

Quisiera que al cargar aun no muestre lo que tiene en el formulario que debería ser visible hasta seleccionar algo

 $('#Categoria').on('change', function() {
        var selectValor = $(this).val();
        //alert (selectValor);

        if (selectValor == 'Impresora') {
            $('.cartucho').show();
        } else  {
            $('.cartucho').hide();
            //alert('esta es la opcion 2')
        }
        if (selectValor == 'CPU') {
            $('.implementos').show();
        } else {
            $('.implementos').hide();
            //alert('esta es la opcion 2')
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form role="form" method="post" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Registrar usuario</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Categoria</label>
                        <select id="Categoria" name="Categoria" class="form-control">
                        <option value="">Selecciona categoria</option>
                            <option value="Impresora">Impresora</option>
                            <option value="Laptop">Laptop</option>
                            <option value="Escaner de ticket">Escaner de ticket</option>
                            <option value="Impresora de etiquetas">Impresora de etiquetas</option>
                            <option value="Telefono">Telefono</option>
                            <option value="Monitor">Monitor</option>
                            <option value="CPU">CPU</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Fecha de ingreso</label>
                        <div class="input-group date" id="reservationdate" data-target-input="nearest">
                            <input type="date" class="form-control datetimepicker-input" data-target="#reservationdate">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Condición</label>
                        <select name="Condicion" class="form-control">
                            <option value="Nuevo">Nuevo</option>
                            <option value="Usado">Usado</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre</label>
                        <input required type="text" name="Nombre" class="form-control" id="nombre">
                    </div>
                    <div class="mb-3">
                        <label for="serie" class="form-label">No Serie</label>
                        <input required type="text" name="NoSerie" class="form-control" id="serie">
                    </div>
                    <div class="mb-3 cartucho">
                        <label for="cartucho" class="form-label">Modelo cartucho</label>
                        <input required type="text" name="ModeloCartucho" class="form-control" id="cartucho">
                    </div>
                    <div class="mb-3 implementos">
                        <label for="teclado" class="form-label">No Serie teclado</label>
                        <input required type="text" name="Teclado" class="form-control" id="teclado">
                    </div>
                    <div class="mb-3 implementos">
                        <label for="mouse" class="form-label">No Serie mouse</label>
                        <input required type="text" name="Mouse" class="form-control" id="mouse">
                    </div>
                </div>

                <!------>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Registrar</button>
                </div>
            </div>  
    </div>
    </form>
</div>

O si tienen algún método diferente. Igual me faltan más campos para el formulario así que ocultare algunas cosas más con otras categorías

Si pueden apoyarme se los agradecería mucho

2
  • 5
    Usando CSS, podría aplicar el atributo display en none a los elementos que aún no se hayan seleccionado, así cada que cargue el documento solo se muestren los que desees dejándolos en block y alternándolos cada que el usuario seleccione una categoría.
    – RCDM
    el 30 mar. 2023 a las 23:23
  • Gracias, ya solo le puse eso y quedo sin problema el 30 mar. 2023 a las 23:50

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.