2

muy buenas tardes tengo una duda de como traer los datos mediante un selecte de manera que al yo seleccionar una opción me muestre solo los datos con esa opcion señalada. les comparto la vista y el codigo que tengo.introducir la descripción de la imagen aquí

El selecte de Tipo Menu quiero que cuando yo cambie la opcion me retorne en la misma vista los datos con el Tipo que estoy seleccionando en el Select de ante mano muchas gracias.

les comparto el codigo que tengo asta el momento!

<section class="pull-up">
<div class="container">
<div class="row ">
<div class="col-md-12">
<div class="card py-3 m-b-30">

    <div class="col-md-12">
        {{ Form::open(['route' => 'search', 'method' =>'GET', 'class' => 'form-inline'])}}
        <div class="form-group col-md-4">
        <label for="inputEmail6">Nombre Menu:</label>
        <input type="text" name="name" id="name" value="" placeholder="Name_Menu" class="form-control" autocomplete="off">
        </div>
        <br><br>
        <div class="form-group col-md-4">
        <label for="inputEmail6"></label>
        <button type="submit" class="btn btn-success"><a >Buscar</a></button>
        </div>
        {{Form::close()}}
    </div>
    <div class="form-row">
        <div class="col-md-6" style="text-align: left;">
            <label for="inputEmail6">Tipo Menu</label>
            <select name="type" class="form-control" id="type" onchange="changeType();">
            <option value="0"  selected >De Menú</option>
            <option value="1" selected >De Complementos</option>
            </select>
        </div>

    </div>
<div class="form-row">
<div class="col-md-12" style="text-align: right;">
    <a href="{{ Asset($link.'add') }}" class="btn m-b-15 ml-2 mr-2 btn-rounded btn-warning">Add New</a>&nbsp;&nbsp;&nbsp;</div>

</div>
<div class="card-body">
<table class="table table-hover ">
<thead>
<tr>
<th>Sort Order</th>
<th>Name</th>
<th>Tipo</th>
<th>Status</th>
<th style="text-align: right">Option</th>
</tr>

</thead>
<tbody>

Luego recorro el foreach que me trae los datos para crear la tabla

@foreach($data as $row)
<tr>
<td width="15%">{{ $row->sort_no }}</td>
<td width="20%">{{ $row->name }}
    @if($row->id_element != '')
    <small>({{$row->id_element}})</small>
    @endif
</td>
<td width="20%">
    @if($row->type == 0 )
        De Menú
    @else
        De Complemento
    @endif
</td>
<td width="27%">
@if($row->status == 0)

<button type="button" class="btn btn-sm m-b-15 ml-2 mr-2 btn-success" onclick="confirmAlert('{{ Asset($link.'status/'.$row->id) }}')">Active</button>

@else

<button type="button" class="btn btn-sm m-b-15 ml-2 mr-2 btn-danger" onclick="confirmAlert('{{ Asset($link.'status/'.$row->id) }}')">Disabled</button>

@endif

</td>

<td width="19%" style="text-align: right">

<a href="{{ Asset($link.$row->id.'/edit') }}" class="btn m-b-15 ml-2 mr-2 btn-md  btn-rounded-circle btn-success" data-toggle="tooltip" data-placement="top" data-original-title="Edit This Entry"><i class="mdi mdi-border-color"></i></a>

<button type="button" class="btn m-b-15 ml-2 mr-2 btn-md  btn-rounded-circle btn-danger" data-toggle="tooltip" data-placement="top" data-original-title="Delete This Entry" onclick="deleteConfirm('{{ Asset($link."delete/".$row->id) }}')"><i class="mdi mdi-delete-forever"></i></button>

</td>
</tr>
@endforeach

</tbody>
</table>
{{$data->render()}}
</div>
</div>
</div>
</div>
</div>
</section>

Y este es mi controlador que me trae los datos

 public function index()
{
    $res = new Category;

    return View($this->folder.'index',[
        'data' => $res->getAll(),
        'link' => env('user').'/category/']);
}
  
3
  • 1
    El código va como texto por favor
    – BetaM
    el 22 oct. 2020 a las 23:23
  • ok ahora lo modifico el 23 oct. 2020 a las 3:02
  • para no estar haciendo consultas a tu backend puedes manejarlo por javascript, haces un evento onchange y cuando cambies el select le agregas display:none a los elementos que no quieres mostrar el 23 oct. 2020 a las 13:56

1 respuesta 1

0

Como te lo mencionaron en los comentarios, puedes hacer una función para ocultar los elementos que no quieres.

Coloca una clase a tus elementos que tienes como filas, por ejemplo:

<div class!="type-{{ $row->type }}"> Some content </div>

Así ya sabrás cómo identificar los elementos de cada tipo.

$('.tu-select').on('change', function() {
     var selected = $(this).attr('id'); // Regresea el ID de la opción seleccionada
     
     $('.row').css('display', 'none'); // Ocultas todos los elementos
     $('.type-' + selected).css('display', 'block'); // Muestras solo los de cierta clase
 
});

Y listo

Tu Respuesta

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

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