1

Estoy haciendo un proyecto en local y tengo una apartado de usuarios donde se registran. Entre los campos de registro tengo un <select> para los estados y otro para las ciudades. En mi base de datos tengo una tabla para estados, y otra para las ciudades, y están relacionadas de la siguiente forma: en la tabla ciudades tengo un campo estado_id porque las ciudades pertenecen a un estado. De esta forma sé que ciudades pertenecen a que estado.

¿Cómo podría hacer para que al seleccionar el estado, me muestre solo las ciudades que le pertenecen? Actualmente muestro todas las ciudades así como todos los estados y lo veo algo poco práctico, me gustaría mejorarlo de ese modo.

Select ESTADOS

      <div class="form-group">
            <label for="estado" class="col-sm-2 control-label">Estado</label>

            <div class="col-sm-8">
                <select class="form-control" name="estado" id="estado">

                    @foreach ($estados as $estado)
                        <option value="{{$estado->id}}">{{$estado->nombre}}</option>
                    @endforeach
                </select>
            </div>
        </div>

Select CIUDADES

<div class="form-group">
    <label for="ciudad" class="col-sm-2 control-label">Ciudad</label>

    <div class="col-sm-8">
            <select class="form-control" name="ciudad" id="ciudad">
                @foreach ($ciudades as $ciudad)
                    <option value="{{$ciudad->id}}">{{$ciudad->nombre}}</option>
                @endforeach
            </select>
        </div>
</div>

Acción del controlador que mando tanto las ciudades como los estados.

    public function create(){

    $estados = Estado::all();
    $ciudades = Ciudad::all();
    $puestos = Puesto::all();
    return view('users.create', [
        'estados' => $estados,
        'ciudades' => $ciudades,
        'puestos' => $puestos,
    ]);
}

Este es el <select> utilizado en la vista

<div class="form-group">
        <label for="ciudad" class="col-sm-2 control-label">Ciudad</label>

       <div class="col-sm-8">
            <select name="ciudad" id="ciudad"></select>
       </div>
 </div>

Esta es la vista

introducir la descripción de la imagen aquí

Este fue el codigo que probe

$("#ciudad").select2({
    placeholder: "Selecciona una opción",
    language: "es",
    width: '100%',
    ajax: {
        url: "{{ route('ciudad.select2') }}",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    templateResult: plantillaBusqueda,
    templateSelection: plantillaSeleccionado
});

function plantillaBusqueda(ciudad) {
    return ciudad.nombre;
}

function plantillaSeleccionado(ciudad) {
    if (ciudad.text != "") {
        return ciudad.text
    }
    return ciudad.nombre;
}

Mi ruta quedo tal que así

Route::get('ciudad/select2', 'HomeController@buscarLocalidad')->name('ciudad.select2');

y el HomeController quedo así

public function buscarLocalidad()
{
    $q       = trim(\request('q'));
    $results = Ciudad::where('nombre', 'LIKE', '%' . $q . '%')->take(15)->get();

    return Response::json($results);
}

Peticion en el navegador introducir la descripción de la imagen aquí

Error 404 en navegador introducir la descripción de la imagen aquí

Inspector de elementos

introducir la descripción de la imagen aquí

1 respuesta 1

2

Se puede hacer con peticiones AJAX refrescando los options del select, pero mi recomendación es que uses una librería llamada select2.

El javascript te quedaría tal que así

$("#ciudad").select2({
                        placeholder: "Selecciona una opción",
                        language: "es",
                        width: '100%',
                        ajax: {
                            url: "{{ route('ciudad.select2') }}",
                            dataType: 'json',
                            delay: 250,
                            data: function (params) {
                                return {
                                    q: params.term
                                };
                            },
                            processResults: function (data) {
                                return {
                                    results: data
                                };
                            },
                            cache: true
                        },
                        templateResult: plantillaBusqueda,
                        templateSelection: plantillaSeleccionado
                    });

function plantillaBusqueda(ciudad) {
            return ciudad.nombre;
        }

function plantillaSeleccionado(ciudad) {
        if (ciudad.text != "") {
            return ciudad.text
        }
        return ciudad.nombre;
    }

y tendrías que hacerte un método en el controlador para gestionarla:

Route::get('ciudad/select2', 'HomeController@buscarLocalidad')->name('ciudad.select2');


public function buscarLocalidad()
{
    $q       = trim(\request('q'));
    $results = Ciudad::where('nombre', 'LIKE', '%' . $q . '%')->take(15)->get();

    return Response::json($results);
}

DOCUMENTACION SELECT2

10
  • Hola acabo de probarlo y sigue sin funcionar, puse el código tal como me mencionas el único cambio que hice fue en la ruta, que creo estaba errónea, ya que hiciste referencia al método buscar y era buscarLocalidad, aun con esa corrección me sigue sin arrojar ningún resultado. Edite la pregunta y agregue mi select en la vista. Commented el 27 mar. 2019 a las 17:45
  • Yo lo uso a diario y funciona, pon algo de lo que probaste. PD: efectivamente el buscar estaba mal Commented el 27 mar. 2019 a las 17:54
  • Acabo de editar la pregunta, puse el código que probé y el resultado en la vista. Muchas gracias! Commented el 27 mar. 2019 a las 18:40
  • has mirado en el natevagor las peticiones que te hace al escribir en el select2? Commented el 28 mar. 2019 a las 15:07
  • No habia revisado, acabo de revisar, creo que debe ser la url en la consulta con ajax no? o tu que opinas. Adjunte un foto arriba en la pregunta. Commented el 28 mar. 2019 a las 15:23

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.