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();
    }
});

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