I need to hide or show a div that contains a select only if in another select I choose a particular option, otherwise hide it.
For this case, the one I want to hide or show is the div that has id="bancos"
it and what happens when I have the value selected in the previous one, <option value="Factoring" id="topic">Factoring</option>
I was testing with a script but it does not work for me, how should it be using the 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
You can verify as follows. Select the input that contains the value of the option, and check, if it's Factoring , display the input or the div that has id: topic :
At least with the code shown, the current function is not running at any time, and if it does, you won't see any changes, because you add and remove a class from one (or more) elements with class
topic
:By having this:
<option value="Factoring" id="topic">Factoring</option>
you should use$('#topic')
to access the element by ID, but it's not this you want to modify, it's the banks div.You need to assign an event to the charge type selector and parse the value to know whether or not to show the banks div: