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
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);
}
Inspector de elementos