1

Necesito ocultar o mostrar un div que contiene un select solo si en otro select elijo una opcion en particular, de lo contrario ocultarlo.

para este caso el que quiero ocultar o mostrar es el div que tiene el id="bancos" y esto que suceda al tener seleccionado en el anterior el valor <option value="Factoring" id="topic">Factoring</option> estaba probando con un script pero no me funciona, como deberia ser utilizando el script?

@extends('layouts.frontend')
@section('main-content')
<section class="main-content profile-page">
    <div class="d-flex align-items-center gap-l mb-3">
        <a class="d-inline-flex align-items-center text-decoration-none gap-s" href="{{route("frontend.billing.pending")}}">
            <img src="{{ asset('images/icon-back.svg') }}" alt="go-back">
            <span class="font-weight-bold primary-color">Volver</span>
        </a>
        <h1 class="primary-title primary-color">
            EDITAR COBRO
        </h1>
        @include('frontend.layouts.partials.alerts')
    </div>
    <div class="card tf-card tf-card--alert">
        <p hidden>ID: {{ request()->DocEntry }}</p>
        
        <form method="POST" action="{{ route("frontend.billing.update")}}">
            <input type="text" class="form-control" name="DocEntry" id="DocEntry" value="{{ request()->DocEntry }}" hidden>
            <div class="form-group">
                <label class="required" for="tipodecobro">Cambiar tipo de cobro</label>                
                <select class="form-control select2" name="tipodecobro" id="tipodecobro" required>                   
                        <option value="Vencimiento en 30 días">Vencimiento en 30 días</option>                
                        <option value="Factoring" id="topic">Factoring</option>
                        <option value="Confirming">Confirming</option>
                </select>
                @if($errors->has('name'))
                    <div class="invalid-feedback">
                        {{ $errors->first('name') }}
                    </div>
                @endif
            </div>
            <div class="form-group" id="bancos">
                <label class="required" for="banco">Seleccione un banco</label>                
                <select class="form-control select2" name="banco" id="banco" required>
                    @foreach($bancos as $banco)
                        <option value="{{$banco->name}}">{{$banco->name}}</option>
                    @endforeach
                </select>
                @if($errors->has('name'))
                    <div class="invalid-feedback">
                        {{ $errors->first('name') }}
                    </div>
                @endif
            </div> 

            <div class="form-group d-flex mt-5">
                <a href="{{route('frontend.billing.pending')}}" class="btn button button--danger font-weight-bold mr-auto">
                    Cancelar
                </a>
                <input type="submit" value="Guardar" class="btn button button--primary button--large font-weight-bold" href="{{route('frontend.billing.pending')}}">
            </div>
            @csrf
        </form>
    </div>
</section>

@endsection
@section('scripts')
@parent
<script>
     function show(bancos) {
    $('.topic').addClass('d-none');
    $('.topic').removeClass('d-none');
     }
</script>
@endsection

2 respuestas 2

1

puedes hacer la verificacion de la siguiente forma. Selecciona el input que contiene el valor del option, y verifica, si es Factoring, muestra el input o el div que tiene como id:topic:

<script type="text/javascript">
  $(document).ready( function () {
    $('#tipodecobro').on('change', function() {
       console.log($('#tipodecobro').val()); //Aquí puedes visualizar el valor seleccionado
       if( $('#tipodecobro').val() == 'Factoring') {
        // Mostrar
           $('#IDdelhidden').show();
       } else { 
        // Caso, contrario, ocultar
           $('#IDdelhidden').hide();
       }
    })
  });
</script>
1

Al menos con el código mostrado, la función actual no se está ejecutando en ningún momento y, en caso de ejecutarse, no vas a ver cambios, porque agregas y quitas una clase a uno (o más elementos) con clase topic:

function show(bancos) {
    $('.topic').addClass('d-none');
    $('.topic').removeClass('d-none');
}

Al tener esto: <option value="Factoring" id="topic">Factoring</option> deberías usar $('#topic') para acceder al elemento por ID, pero no es este el que deseas modificar, sino el div de bancos.

Necesitas asignar un evento al selector de tipo de cobro y analizar el valor para saber si mostrar o no el div de bancos:

$('#tipodecobro').on('change', function() {
    // $(this) es el select tipo de cobro, se analiza el valor
    if($(this).val() == 'Factoring')) {
        // Mostrar
        $('#banco').show();
    } else {
        // Ocultar
        $('#banco').hide();
    }
});

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.